Как добавить список классов и показать только последний в JavaScript?

Question

У меня есть функция, которая вызывает случайное количество классов, добавленных в мои div:

htmlFields[i].classList.add(numbers[i]);

numbers[i] Можно добавить случайные классы: 'one','two','three','four','five'

И мои дивы, которые уже есть 'static','static2' классы добавляются случайные классы, как это:

<div class="static static2 five one">
<div class="static static2 two four one">
<div class="static static2 one three four">
<div class="static static2 five one">
<div class="static static2 one five four">

Я хочу сохранить статические классы и добавить только последний класс из случайных классов. Я пытался использовать setAttribute() метод, но он удалил статические классы.

Так как же я могу добавить только последний из "случайных классов" и сохранить статические классы одновременно?

Answer 1

В вашей функции перед вызовом setAttribute вам нужно сохранить текущий класс в переменной и добавить свой класс случайных чисел, как показано ниже:

var currentClass = htmlFields[i].getAttribute('class');
currentClass += " " + numbers[i];
htmlFields[i].setAttribute('class', currentClass);

Answer 2

Удалить все "случайные" классы:

for ( var j = 0; j < numbers.length; ++j )
  // it's safe to "remove" a class that isn't actually set,
  // so we don't need to check
  htmlFields[i].classList.remove( numbers[j] );

Затем добавьте тот, который вы хотите.

htmlFields[i].classList.add(numbers[i]);

Answer 3

Либо явно удалите все остальные случайные классы, либо используйте setAttribute и повторно добавить статические классы.

Answer 4

Не уверен, что именно вы подразумеваете под случайными классами и под каким условием вы хотите добавить один из этих классов, но вот как вы можете добавлять классы, не теряя статические классы.

var elems = Array.prototype.slice.call(document.querySelectorAll('.static')),
    numbers = ['one','two','three','four','five'];

elems.forEach(function(elem, i) {
    elem.className = elem.className + " " + numbers[i];
});

<div class="static static2"></div>
<div class="static static2"></div>
<div class="static static2"></div>
<div class="static static2"></div>
<div class="static static2"></div>