如何使用jQuery将重复类添加到DOM对象中

How to add a duplicate class to a DOM object using jQuery?

本文关键字：添加 DOM 对象 何使用 jQuery      更新时间：2024-02-25

假设我有一个元素

<a class="Foo Bar" />

我想添加一个重复的类，所以我编码这个：

$('.Bar').addClass('Foo');

没有添加该类，因为该元素已经有了一个类。

我想编码这样的东西：

$('.Bar').addClassForcebly('Foo'); // Fake method, only for example.

我期待以下结果：

<a class="Foo Bar Foo" />

我尝试过使用jQuery的addClass方法的重载：

$('.Bar').addClass(function(i, c) {
    return c + ' Foo';
});

但这也不起作用。它只是不添加重复的类。我该怎么做？

这个问题的要点很简单：我想让我的HTML元素能够被禁用和启用多次。如果我两次"禁用"一个元素（添加两个相同的类），我也应该两次"启用"它，这样我的逻辑才能工作。

假设它是唯一的锚点，并且您已经添加了这个"Foo Bar"

var myAnchor = document.getElementsByTagName("a")[0];
myAnchor.className += " Foo";

我看不出它有任何用处，但你可以通过使用each（）来实现

$('.Bar').each(function(){
   this.className = "Foo" + this.className;
});

或者，您可以使用具有回调函数的attr（attributeName，function（index，attr））重载。

$( ".Bar" ).attr( "class", function( i, val ) {
  return "Foo" + val ;
});

"如果我‘禁用’一个元素两次（添加两个相同的类），我也应该‘启用’它两次，这样我的逻辑才能工作。"

你可以创建自己的插件来跟踪类被添加的次数，比如这样：

(function($) {
    $.fn.addClassWithCount = function (className) {
        return this.each(function() {
            var $this = $(this),
                count = $this.data("disable-count-" + className) + 1 || 1;
            $this.data("disable-count-" + className, count);
            $this.addClass(className);
        });
    };
    $.fn.removeClassWithCount = function (className) {
        return this.each(function() {
            var $this = $(this),
                count = $this.data("disable-count-" + className) - 1 || 0;
            if (count < 0) count = 0;
            $this.data("disable-count-" + className, count);
            if (count === 0)
                $this.removeClass(className);            
        });
    };
})(jQuery);

然后你会像标准的.addClass()和.removeClass():一样使用

$("someSelector").addClassWithCount("someClass");

演示：http://jsfiddle.net/Sve9Q/2/

请注意，上面只是我快速拼凑出来的东西，给你一个大致的想法，所以很明显，它可以被美化，变得更坚固。

我认为jQuery在使用addClass添加类时会检查重复项，您可以只使用

$('.Bar').each(function(i, e) {
  e.attr('class', e.attr('class') + ' Foo');
});

对于您指定的用途，我认为您的最佳选择应该是一个包含禁用次数的类。

第一次添加"禁用"类。

如果一个元素已经被"禁用"，则添加一个"disabled2"类（或将"disabled"替换为"disabled2"）等。

重新启用时，请执行相反的操作。

您可以使用[class^="disabled"]CSS3选择器来匹配所有要添加的disabled*类，而无需在CSS中明确指定它们。

请检查以下代码

$(function(){
    alert($(".Bar").attr("class"));
    $(".Bar").attr("class",($(".Bar").attr("class") + ' Foo'));
    alert($(".Bar").attr("class"));
});

您可以查看下面的链接

http://jsfiddle.net/GS43e/

相关文章：