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>添加类，因此您还必须检查类本身，而不是按钮。 < / p>

所以你必须这样做： -

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

Answer 2

给＆＃34;未点击＆＃34;默认为。

<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");
});

Answer 3

在您的代码$this中仅定位$('.custom-navbar-toggle')的父i，您需要向孩子致电.hasClass

使用find('i')或儿童（）

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

如何在点击时更改按钮类别

3 个答案: