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

Answer 1

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>