CODEWITHSUNDEEP
javascriptjquery
drew
drew

Reputation: 781

How to change class of button on click

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?

Upvotes: 2

Views: 386

Answers (3)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

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>

Upvotes: 1

Ram
Ram

Reputation: 504

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

Upvotes: 1

Dalin Huang
Dalin Huang

Reputation: 11342

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>

Upvotes: 0

Related Questions