如何更改点击按钮的类别

Question

I am trying to change the icon of a button when clicked.

With the following code I have managed to change the icon when first clicked, but it doesn't change back when clicked again.

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

    }
});

How can I get the button to change back once clicked again?

Answer 1

A better approach is addClass() and removeClass() like below:-

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

Example:-

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

Note:- your initial code is adding class to children <i> , so you have to check class also on children itself, not on button.

So you have to do it like below:-

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

EXAMPLE:-

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

Give "not-clicked" class by default.

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

Then using toggerClass function you can add remove class names to i tag

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

Answer 3

In your code $this only target $('.custom-navbar-toggle') which is the parent of the i , you need go down to the child to call .hasClass

use find('i') or 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>