Why not toggle classes in jQuery?

Question

I created a little sketch to testing my knowledge. I would like to change classes by click on td elements.

I added a basic class and after i'd change with toggleClass(). Unfortunately doesn't works.

$( function() {
    $('td').addClass("grey-cell");

    $('td').click( function() {
        if($(this).hasClass("grey-cell"))
            $(this).toggleClass("red-cell");
        if($(this).hasClass("red-cell"))
            $(this).toggleClass("blue-cell");
        if($(this).hasClass("blue-cell"))
            $(this).toggleClass("green-cell");
        if($(this).hasClass("green-cell"))
            $(this).toggleClass("grey-cell");
    });
});

code sketch

your code would lastly return you with grey-cell class, because you need to use return false; after each if condition, or use if, elseif and else.. for proper results.. thanks.. — ameenulla0007, Feb 03 '16 at 17:43
check the answer of T.J. Crowder and this fiddle as well https://jsfiddle.net/ov3z0xh3/2/ — ameenulla0007, Feb 03 '16 at 17:53

Ibrahim Khan · Answer 1 · 2016-02-03T18:38:27.833

You can do it without using complex if else. Make an array of class in your required sequence. Then on click of td change class according to the sequence of array. If you reached at the last item of array then go back to first.

$(function() {
    $('td').addClass("grey-cell");
    var classes = ['grey-cell', 'red-cell', 'blue-cell', 'green-cell'];
    var total = classes.length;

    $('td').click(function () {
        var cls = $(this).attr('class');

        //if you have other classes then take last class
        //var arr = $(this).attr('class').split(' ');
        //var cls = arr[arr.length];

        var index = classes.indexOf(cls);
        index = (index + 1) % total;

        $(this).removeClass(cls).addClass(classes[index]);
    });
});

Good idea, but best to check not just with `indexOf`, since (say) a `colored-cell` class would confuse that check. Also, just FYI, there's an `index` rollover trick you can use: `index = (index + 1) % classes.length;` — T.J. Crowder, Feb 03 '16 at 18:28

score 0 · Accepted Answer · answered Feb 03 '16 at 17:49

Let's follow it through logically:

$(function() {
    $('td').addClass("grey-cell");

    $('td').click(function() {
        if ($(this).hasClass("grey-cell"))
            $(this).toggleClass("red-cell");
        if ($(this).hasClass("red-cell"))
            $(this).toggleClass("blue-cell");
        if ($(this).hasClass("blue-cell"))
            $(this).toggleClass("green-cell");
        if ($(this).hasClass("green-cell"))
            $(this).toggleClass("grey-cell");
    });
});

When you click a cell, it will have grey-cell, so you toggle red-cell on. Then, on the next line, you see if it has red-cell (it will) and if so you toggle blue-cell on. Then you do the same with blue/green, then green/grey.

So after the first click, the td has red-cell blue-cell green-cell and doesn't have grey-cell.

My guess is you meant to

A) Use else so only one path was followed, and

B) Turn off the previous class it has

E.g.:

$(function() {
  $('td').addClass("grey-cell");

  $('td').click(function() {
    var td = $(this);
    if (td.hasClass("grey-cell")) {
      td.toggleClass("grey-cell red-cell");
    } else if (td.hasClass("red-cell")) {
      td.toggleClass("red-cell blue-cell");
    } else if (td.hasClass("blue-cell")) {
      td.toggleClass("blue-cell green-cell");
    } else if (td.hasClass("green-cell")) {
      td.toggleClass("green-cell grey-cell");
    }
  });
});

Note how when we know it has (say) grey-cell, we include grey-cell in the toggleClass so we remove it when adding red-cell. And so on.

$(function() {
  $('td').addClass("grey-cell");

  $('td').click(function() {
    var td = $(this);
    if (td.hasClass("grey-cell")) {
      td.toggleClass("grey-cell red-cell");
    } else if (td.hasClass("red-cell")) {
      td.toggleClass("red-cell blue-cell");
    } else if (td.hasClass("blue-cell")) {
      td.toggleClass("blue-cell green-cell");
    } else if (td.hasClass("green-cell")) {
      td.toggleClass("green-cell grey-cell");
    }
  });
});

.grey-cell {
  background-color: grey;
  color: white;
}
.red-cell {
  background-color: red;
  color: white;
}
.blue-cell {
  background-color: blue;
  color: white;
}
.green-cell {
  background-color: green;
  color: white;
}

<table>
  <tbody>
    <tr>
      <td>Click me</td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Why not toggle classes in jQuery?

2 Answers2