Как добавить дублирующийся класс в объект DOM, используя jQuery?

0

Допустим, у меня есть элемент

<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-элементы могли быть отключены и активированы много раз. Если я дважды отключу элемент (добавив два одинаковых класса), я должен "включить" его дважды, чтобы моя логика работала.

  • 1
    Можете ли вы сказать, какое преимущество / различие достигается при дублировании класса? Я не могу понять любой .
  • 0
    Это действительно проблема интерпретации браузера; у вас нет смысла назначать один и тот же класс два раза объекту DOM.
Показать ещё 5 комментариев
Теги:
class

6 ответов

1
Лучший ответ

"Если я дважды отключу элемент (добавив два одинаковых класса), я должен" включить "его дважды, чтобы моя логика работала".

Вы можете создать свой собственный плагин, который отслеживает, сколько раз добавлен класс, примерно так:

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

Обратите внимание, что вышесказанное - это то, что я быстро собрал, чтобы дать вам общую идею, поэтому, очевидно, ее можно было бы приманить и сделать более надежной.

Поделиться
2

Я не вижу его использования, но вы можете сделать это с помощью использования каждого()

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

ИЛИ, вы можете использовать перегрузку attr (attributeName, function (index, attr)), которая имеет функцию обратного вызова.

$( ".Bar" ).attr( "class", function( i, val ) {
  return "Foo" + val ;
});
Поделиться
2

позволяет сказать, что это единственный якорь, и у вас уже есть этот "Foo Bar"

var myAnchor = document.getElementsByTagName("a")[0];
myAnchor.className += " Foo";
Поделиться
1

Для использования, которое вы указали, мое мнение таково, что ваш лучший выбор должен быть классом, который включает в себя количество раз, когда он был отключен.

В первый раз вы добавляете класс "disabled".

Если элемент уже "отключен", вы добавляете класс "disabled2" (или заменяете "disabled" на "disabled2") и т.д....

При повторном включении вы делаете наоборот.

Вы можете использовать селектор [class ^ = "disabled"] CSS3 для соответствия всем запрещенным * классам, которые вы хотите добавить, без указания их явно в вашем CSS.

Поделиться
  • 0
    У меня есть CSS на моем сайте, и мне не нравятся эти опции.
  • 0
    какие варианты? Я говорю о создании класса CSS с именами
Показать ещё 5 комментариев
1

Я думаю, что jQuery проверяет дубликаты при добавлении классов с addClass, вы можете просто использовать

$('.Bar').each(function(i, e) {

  e.attr('class', e.attr('class') + ' Foo');

});
Поделиться
0

Пожалуйста, проверьте ниже код

$(function(){
    alert($(".Bar").attr("class"));

    $(".Bar").attr("class",($(".Bar").attr("class") + ' Foo'));

    alert($(".Bar").attr("class"));

});

Вы можете проверить ссылку ниже

http://jsfiddle.net/GS43e/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню