Как изменить класс кнопки при нажатии

Question

Я пытаюсь изменить значок кнопки при нажатии.

С помощью следующего кода мне удалось изменить значок при первом нажатии, но он не меняется обратно при повторном нажатии.

HTML

<button class="toggle-button custom-navbar-toggle">
    <i class="material-icons">menu</i>
</button>

JS

$('.custom-navbar-toggle').click(function(){
    var $this = $(this);
    if($this.hasClass('not-clicked')){
        $this.html('<i class="material-icons clicked">menu</i>'); 

    } else {
        $this.html('<i class="material-icons not-clicked">check</i>'); 

    }
});

Как я могу получить кнопку, чтобы изменить обратно после повторного нажатия?

javascript jquery

1

drew 28 Авг 2017 в 22:30

Answer 1

Лучший подход - addClass() и removeClass(), как показано ниже: -

$('.custom-navbar-toggle').click(function(){
    if($(this).children('i').hasClass('not-clicked')){
        $(this).children('i').removeClass('not-clicked').addClass('clicked').html('menu'); 
    } else {
        $(this).children('i').removeClass('clicked').addClass('not-clicked').html('check'); 
    }
});

Пример:-

$('.custom-navbar-toggle').click(function(){
  if($(this).children('i').hasClass('not-clicked')){
      $(this).children('i').removeClass('not-clicked').addClass('clicked').html('menu'); 
  } else {
      $(this).children('i').removeClass('clicked').addClass('not-clicked').html('check'); 
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="toggle-button custom-navbar-toggle">
  <i class="material-icons">menu</i>
</button>

Примечание. - Ваш исходный код добавляет класс к дочерним элементам <i>, поэтому вы должны проверять класс и для самих дочерних элементов, а не для кнопки.

Так что вы должны сделать это, как показано ниже:

$('.custom-navbar-toggle').click(function(){
    if($(this).children('i').hasClass('not-clicked')){
        $(this).html('<i class="material-icons clicked">menu</i>'); 
    } else {
        $(this).html('<i class="material-icons not-clicked">check</i>'); 
    }
});

ПРИМЕР:-

$('.custom-navbar-toggle').click(function(){
  if($(this).children('i').hasClass('not-clicked')){
      $(this).html('<i class="material-icons clicked">menu</i>'); 
  } else {
      $(this).html('<i class="material-icons not-clicked">check</i>'); 
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle-button custom-navbar-toggle">
  <i class="material-icons">menu</i>
</button>

1

Anant Singh---Alive to Die 28 Авг 2017 в 20:03

Answer 2

В вашем коде $this только цель $('.custom-navbar-toggle'), которая является родителем i, вам нужно перейти к потомку, чтобы вызвать .hasClass

Используйте find('i') или children ()

$('.custom-navbar-toggle').click(function() {
  var $this = $(this);
  if ($this.find('i').hasClass('not-clicked')) {
    $this.html('<i class="material-icons clicked">menu</i>');
  } else {
    $this.html('<i class="material-icons not-clicked">check</i>');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="toggle-button custom-navbar-toggle">
    <i class="material-icons">menu</i>
</button>

0

Dalin Huang 28 Авг 2017 в 19:36

Answer 3

Дайте класс "не нажали" по умолчанию.

<button class="toggle-button custom-navbar-toggle">
    <i class="material-icons not-clicked">menu</i>
</button>

Затем с помощью функции toggerClass вы можете добавить удалить имена классов в тег i

$('.custom-navbar-toggle').click(function(){
    $(this).find("i").toggleClass("not-clicked").toggleClass("clicked");
});

1

Ram 28 Авг 2017 в 19:42

Как изменить класс кнопки при нажатии

3 ответа

Похожие вопросы

Новые вопросы

javascript