javascript - 在元素上添加/删除最新应用的类

Question

我有以下代码片段，当我点击不同的元素时它工作正常，但只要我点击一个图像，我在没有任何变化之前点击过。

代码如下:

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

所以现在我想删除最新应用的类以附加新的类。有什么办法可以用 jQuery 做到这一点吗？还是有比我正在考虑的解决方案更简单的解决方案？

感谢您的帮助。

更新:

Body 已经有类，所以 removeClass() 不是正确的方法，因为这些类将会丢失!

Answer 1

以下将添加与点击图像关联的类，或删除该类(如果它已经存在):

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

或者确保 body 一次只有一个类，如果同一张图片被点击两次则删除当前的类:

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

...但是当然调用不带参数的removeClass() 会删除所有类，即使是那些与颜色无关的类，所以也许:

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