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

或者确保身体一次只有一个类，如果同一个图像被点击两次，则删除当前的一个类：

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

Answer 2

这将删除最近添加的课程：

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

Answer 3

您可以尝试使用正则表达式删除最后一个“单词”：

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

我对这个问题的解释是你要删除最后添加的类而不管哪个类...因此正则表达式会处理任何字符串。

toggleClass方法只切换一个类（因此它构建了多种颜色的类，例如"blue black yellow"），但如果这是你想要的，它肯定会比正则表达式更好地工作（根本不起作用）。

Answer 4

您需要删除添加到body的所有先前类，然后添加新类：

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

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

4 个答案: