结合removeClass(）和data(）来记住哪些元素拥有该类并将其还原

Combining removeClass() and data() to remember which elements had the class and restore it

本文关键字：拥有 还原 元素 data removeClass 结合      更新时间：2023-09-26

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

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

此外，可以使用提取

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

那么，让它发挥作用的最"干净"的方式究竟是什么呢？

所以基本上，如果我有7个<li>行，并且随机地有3个<li>具有类"active"。

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

干杯

试试这个，看看它是否符合要求。

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/

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

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

相关文章：