6

我创建了自己的 Switcher jQuery，并且我想在单击另一种颜色时删除类，例如：我在 body 标签上有“蓝色”类，当有人单击红色时应该删除蓝色类并将其替换为红色类等。 .

代码 ：

$("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/

4

4 回答 4

2

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

其次，为了达到您的要求，您可以removeClass在添加新类之前提供一个以空格分隔的列表，列出所有要删除的类addClass。尝试这个：

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

更新的小提琴

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

$(".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

更新的小提琴

于 2015-12-19T18:25:11.823 回答
2

尝试使用, with parameter , with parameter从body元素中删除设置颜色，以在调用设置新颜色之前选择最后一组；如果连续单击相同的颜色样本，还添加以防止删除className.split()" ".slice()-1classNamebody.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/

于 2015-12-19T18:28:21.767 回答
1

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

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

更新小提琴：https ://jsfiddle.net/p18cqa5s/5/

于 2015-12-19T18:37:26.603 回答
1

使用该removeClass()方法删除现有类并调用addClass()添加新类。

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

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

更简化的版本

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

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

于 2015-12-19T18:23:49.493 回答