jquery - 使用 jQuery addClass/removeClass 时如何返回默认样式/主题？

Question

我有这个小提琴：http: //jsfiddle.net/UxVF9/

$('#theme1').click(function() {
    $('.links a').removeClass().addClass('theme1');
});

如何通过按“主题 1”按钮回到默认的彩色状态（主题 1）？

我知道我使用“removeClass()”删除了所有类，并且我已经尝试了很多，但这仍然让我抓狂。

我很感激帮助。谢谢！

Answer 1

最简单的方法就是删除不需要的类。

$('#theme1').click(function() {
    $('.links a').removeClass("theme2 theme3").addClass('theme1');
});

但是，这还不够，因为特定类具有优先级并且可以与 theme1 一起正常工作。你需要增加theme2和theme3的特异性，但这很简单：

.links .theme2 { background-color: #000; color: #fff; text-decoration:none; }

将它放在 CSS 中的其他规则集之后。

---

您还可以通过在功能上删除所有以“主题”开头的类并使用单个类进行绑定来使这更简单/更灵活：http: //jsfiddle.net/ExplosionPIlls/UxVF9/2/

Answer 2

我会将所有初始主题存储在一个数组中。 更新小提琴

var initial = new Array (); //empty array
$('.links a').each(function(index) { //each element in the selector is returned in the same order and has an index.
    initial[index] = $(this).attr('class'); // add the starting class to the empty array positioned with the index
});
$('#theme1').click(function() {
    $('.links a').removeClass().each(function(index) { //same order and index 
        $(this).addClass(initial[index]); // add the classes back using the array and index
    });
});