javascript - Add/remove latest applied class on an element

Question

I have the following snippet of code and it works fine when I click on different elements but as long as I click an image I have clicked before nothing changes.

Here is the code:

  $("img").on('click', function() {
        var $body = $("body");
        if($(this).data('color') == 'black') {
          $body.addClass("black");
        }
        if($(this).data('color') == 'blue') {
          $body.addClass("blue");
        }
        if($(this).data('color') == 'silver') {
          $body.addClass("silver");
        }
        if($(this).data('color') == 'white') {
          $body.addClass("white");
        }
        if($(this).data('color') == 'yellow') {
          $body.addClass("yellow");
        }
      });

So now I want to remove the latest applied class in order to append the new one. Is there any way to do so with jQuery? Or is there any easier solution than the one I'm thinking about?

Thank you for your help.

UPDATE:

Body has already classes so the removeClass() is not the proper way because these ones will be lost!

Answer 1

The following will add the class associated with clicked image, or remove that class if it is already present:

$("img").on('click', function() {
    $("body").toggleClass( $(this).data("color") );
});

Or to ensure the body has only one class at a time, and to remove the current one if the same image is clicked twice:

$("img").on('click', function() {
    var $body = $("body"),
        newColor = $(this).data("color");
    if ($body.hasClass(newColor))
        $body.removeClass();
    else
        $body.removeClass().addClass(newColor);
});

...but of course calling removeClass() with no params would remove all classes, even those not associated with color, so perhaps:

$("img").on('click', function() {
    var $body = $("body"),
        currentColor = $body.data("currentColor"),
        newColor = $(this).data("color");

    $body.removeClass(currentColor);

    if (currentColor === newColor)
        $body.data("currentColor","none");
    else
        $body.addClass(newColor).data("currentColor", newColor);
});

Answer 2

This will remove the most recent class added:

class = $("body").attr('class').split(' ');
class.pop();
$("body").attr('class', class.join(' '));

Answer 3

You can try removing the last "word" using regex:

var newClass = $body.attr("class").replace(/(^|\s+)\b\w*\b\s*$/,"");
$body.attr("class", newClass);

My interpretation of the question is that you want to remove the last added class regardless of which class it is... hence the regex takes care of any string.

The toggleClass method toggles only the one class (thus it builds up classes of multiple colors, e.g. "blue black yellow"), though if that is what you want, it would most definitely work better than the regex (which wouldn't work at all).

Answer 4

You need to remove any previous class added to body, then add the new one:

$("img").on('click', function() {
  $("body").removeClass().addClass($(this).data("color"));
}