javascript - 如何更改单击时按钮的类别

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>'); 

    }
});

如何让按钮再次点击后变回来？

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> ，所以你还必须检查 child 本身的类(class)，而不是按钮。

所以你必须像下面这样做:-

$('.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>