如何使用 addClass 和 removeClass 在 Class 之间切换？

Question

我创建了自己的切换器 jQuery，我想在单击另一种颜色时删除 class，例如：我在正文标签上有 "blue" class当有人点击红色时，应该删除蓝色 class 并将其替换为红色 class 等。

代码：

$("body").addClass("wide light blue");

// Switcher jQuery Plugin
$(".switcher-toggle").click(function() {
    $("#switcher").toggleClass("open");
});

// Theme Layout Switch
$(".layout").change(function() {
    var layout = $(".layout").val();
    $(".wrapper").css("width",layout);
});

// Theme Skins Switch
$(".skins").change(function() {
    var skin = $(".skins").val();
    $("body").toggleClass(skin);
});

// Theme Colors Switch
$(".colors span").each(function() {
     var data_color = $(this).attr("data-color");
     $(this).click(function() {
         $("body").toggleClass(data_color);
     });
});

演示： https://jsfiddle.net/uikithemes/p18cqa5s/

Answer 1

使用 removeClass() 方法删除现有的 classes 并调用 addClass() 添加新的 class.

// Theme Colors Switch
$(".colors span").each(function() {
     var data_color = $(this).attr("data-color");
     $(this).click(function() {
        $("body").removeClass().addClass(data_color);            
     });
});

removeClass() 没有任何参数的方法将删除所有 classes.

更简化的版本

$(".colors span").click(function(e){
  e.preventDefault();
  $("body").removeClass().addClass($(this).attr("data-color"));
})

确保将代码放入 document.ready 事件

Answer 2

首先，请注意 each() 循环是多余的，因为您可以直接在点击处理程序中访问 data-color 属性。

其次，为了实现您的要求，您可以在添加新的 [=29= 之前使用 removeClass 提供要删除的所有 class 的 space 分隔列表] 和 addClass。试试这个：

$(".colors span").click(function() {
    $("body")
        .removeClass('blue red green orange carrot violet pink gold')
        .addClass($(this).data("color"));
});

Updated fiddle

然而，如果添加或删除颜色，这可能会变得有点难以维护。更好的模式是调用单个函数来在选择选项或单击颜色时在 body 元素上设置 classes。试试这个：

$(".skins, .layout").change(applyClasses);
$(".colors span").click(function() {
    $(this).addClass('active').siblings().removeClass('active');
    applyClasses();
});

function applyClasses() {
    var classes = [
        $(".skins").val(),
        $(".layout").val(),
        $(".colors span.active").data('color')
    ];

    $('body').removeClass().addClass(classes.join(' '));
}

applyClasses(); // on load

Updated fiddle

Answer 3

尝试使用 .split() 和参数 " " 从 body 元素 className 移除设置颜色，.slice() 和参数 -1 到 select 最后 className 在 body 上设置，然后调用 .toggleClass() 设置新颜色；还将 true 添加到 .toggleClass() 以防止在连续单击相同颜色样本时删除 class

// Theme Colors Switch
$(".colors span").each(function() {
     var data_color = $(this).attr("data-color");
     $(this).click(function() {
         $("body").removeClass(document.body.className.split(" ").slice(-1)[0])
         .toggleClass(data_color, true);
     });
});

jsfiddle https://jsfiddle.net/p18cqa5s/3/

Answer 4

将所有 data_color 添加到数组，然后单击颜色从数组中的正文中删除所有 class。之后添加新的 class，如下所示。

var data_color= [];
// Theme Colors Switch
$(".colors span").each(function() {
     data_color.push($(this).attr("data-color"));
     $(this).click(function() {
         $("body").removeClass(data_color.join(' ')).addClass($(this).attr("data-color"));
     });
});

已更新 Fiddle：https://jsfiddle.net/p18cqa5s/5/

如何使用 addClass 和 removeClass 在 Class 之间切换？

How to switch between Class using addClass & removeClass?

css

jquery

switchers