javascript - 结合 removeClass() 和 data() 来记住哪些元素有这个类并恢复它

Question

所以我之前问过类似的问题，但几个小时后，当我尝试使用它时，我无法完全弄清楚如何使用它。我被告知以下内容：

$(element).removeClass('active');
$(element).data('removed-class', 'active');

此外，它可以使用

var removeClass = $(element).data('removed-class');

那么让它发挥作用的最“干净”的方式究竟是什么？

所以基本上，如果我有 7<li>行，并且随机有 3 行<li>具有“活动”类。

现在，如果我执行一个函数来删除所有“活动”类<li>，$("li").removeClass("active")例如，我现在如何恢复<li>删除了该类的相同“活动”类？

干杯

Answer 1

试一试，看看它是否符合要求。

var $listItems = $('li','#wrapper');

function clsToData (elements, cls) {
    $(elements).each(function(){
        var $this = $(this);
        if($this.hasClass(cls)){
            $this.removeClass(cls).data('removed-class',cls);
        }
    });
}

function restoreRemovedClasses (elements) {
    $(elements).each(function(){
        var $this = $(this);
        $this.addClass($this.data('removed-class'));
    });
}

$('button','#buttons').on('click',function(){
    var $this = $(this);
    switch ($this.attr('id')){
        case "button1":
            clsToData($listItems,'active');
            break;
        case "button2":
            restoreRemovedClasses ($listItems);
            break;
    }
});

http://jsfiddle.net/rA5aF/

Answer 2

$("li").addClass($("li").data('removed-class'));

除非您可能应该针对适当的元素，而不是liDOM 中的每个元素。