Нужен лучший способ массовой модификации css. Класс

У меня есть огромная коллекция элементов списка. Концепция состоит в том, что пользователь может выбрать только два элемента из этой коллекции. Я показываю чек/Снимите флажок в качестве изображения напротив элемента списка, только для визуальных целей, выбранных в списке или нет. Изображение определено в классе, поэтому мне нужно переключать классы, чтобы отображать выбранные или невыбранные.Нужен лучший способ массовой модификации css. Класс

Это так, как я сейчас изменяю класс, но я думаю, что это может быть слишком тяжело.

function showAsSelected(selectedArr, selectedCat) { 
    var allLinks = document.getElementsByClassName("linkRef"); 
    var len = allLinks.length; 
    for (var i = 0; i < len; i++) { 
     allLinks[i].setAttribute('class', 'linkRef subCategLink'); 
    } 
    for (var i = 0; i < selectedArr.length; i++) { 
     selectedArr[i].setAttribute('class', 'linkRef subCategLinkChkd'); 
    } 
}

«allLinks» получает все элементы, имеющие класс «linkRef». считая выше 100 иногда. Первый цикл изменяет класс на 'linkRef subCategLink'. Это означает, что он удалит 'subCategLinkChkd' из двух элементов: (Запуск цикла на сотни только для изменения двух).

Вторая петля устанавливает класс только для двух элементов, на которые ссылаются в массиве «selectedArr».

источник

2013-11-30 codin

Похоже, первая часть кода является неотобранных уже выбранных элементов. Вместо того, чтобы получать все элементы с помощью класса 'linkRef', вы можете получить все элементы с классом' subCategLinkChkd'. Думаю, этого будет меньше. Кроме того, есть ли у вас какие-либо проблемы с вашим кодом? Если нет, этот вопрос лучше подходит для http://codereview.stackexchange.com/. –

Ну да, первая часть - снять выделение. и я попытался использовать subCategLinkChkd, но он ссылается только на элементы, поэтому изменение класса в возвращаемой коллекции приводит к сбою в работе цикла – codin

* ", но он ссылается только на элементы" * Что это значит? –

Я предполагаю, что у вас похожая структура HTML (, и если да), вы можете попробовать что-то вроде этого.

jsFiddle

(function() { 
    "use strict"; 
    var list = document.getElementById("list"), 
     selectedInputs = [], 
     shifted = null; 

    list.addEventListener("change", function (e) { 
     var target = e.target, 
      index = selectedInputs.indexOf(target); 
     if (target.nodeName.toLowerCase() === "input" && 
      target.type.toLowerCase() === "checkbox" && 
      target.classList.contains("linkRef")) { 
      if (target.checked && index === -1) { 
       target.setAttribute('class', 'linkRef subCategLinkChkd'); 
       selectedInputs.push(target); 
      } else if (target.checked === false && index !== -1) { 
       selectedInputs.splice(index, 1); 
       target.setAttribute('class', 'linkRef subCategLink'); 
      } 
      if (selectedInputs.length > 2) { 
       shifted = selectedInputs.shift(); 
       shifted.setAttribute('class', 'linkRef subCategLink'); 
       shifted.checked = false; 
      } 
     } 
    }, false); 
}());

Обновлено

источник

2013-11-30 08:19:22 Givi

Нужен лучший способ массовой модификации css. Класс

ответ

Смежные вопросы