如何使用addClass＆removeClass在类之间切换？

我创建了我自己的切换器jQuery，并且我想在点击另一种颜色时移除类，例如：我在身体标记上有“蓝色”类，当有人点击红色时，应该删除蓝色类并将其替换为红色类等。
如何使用addClass＆removeClass在类之间切换？

代码：

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

来源

2015-12-19 Mutamiz Team

你没有真正使用'wide'和'light'类东西，所以只删除所有类好像它应该工作 - > https：//开头的jsfiddle。 net/adeneo/p18cqa5s/6/ – adeneo

是的，你是对的！谢谢:) –

首先，注意each()环是多余的，你可以单击处理程序内直接访问data-color属性。其次，为了达到你所要求的，你可以在addClass之前添加新类，然后使用removeClass提供一个空格分隔的所有类的空格分隔列表。试试这个：

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

Updated fiddle

然而，这可能会变得有点难以维持，如果颜色添加或删除。一个更好的模式是调用一个函数来设置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

Updated fiddle

来源

2015-12-19 18:25:11

第一种方法对我来说工作很好，非常感谢你拯救我的项目:)这是我现在的新演示：[link]（https://jsfiddle.net/uikithemes/p18cqa5s/18 /） –

很高兴帮助。我建议你使用第二种方法，因为它更具可扩展性。 –

使用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-19 18:23:49 Shyju

请注意，'body'将会在'select'元素的'change'事件中添加类。使用'removeClass'将消除这些以及颜色类。 –

非常感谢你的帮助:) –

尝试使用.split()从body元素className除去一套色彩，具有参数" "，.slice()与参数-1调用.toggleClass()设置新的颜色之前选择上body最后className集;还加入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-19 18:28:21 guest271314

非常感谢您的帮助:) –

将所有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-19 18:37:26 Azim

非常感谢您的帮助:) –

如何使用addClass＆removeClass在类之间切换？

回答

相关问题