JavasSript (без jQuery) находит несколько классов и добавляет новый класс к каждому

#javascript #loops

#javascript #циклы

Вопрос:

Я могу найти примеры с использованием jQuery, но я не могу найти ответы, как это сделать в чистом JavaScript.

Возможно ли объединить эти два цикла классов с помощью JavaScript для упрощения кода. В итоге у меня будет около 20 классов для проекта, над которым я работаю.

 var srtClass1 = document.getElementsByClassName('class1');
for(var i = 0; i < srtClass1.length; i  ) {
    srtClass1[i].classList.add('newClass');
    srtClass1[i].classList.remove('class1');
}
var srtClass2 = document.getElementsByClassName('class2');
for(var i = 0; i < srtClass2.length; i  ) {
    srtClass2[i].classList.add('newClass');
    srtClass2[i].classList.remove('class2');
}

Ответ №1:

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

 var classes = ['.class1', '.class2', '.class3'];
var elements = document.querySelectorAll(classes.join(','));

for (let element of elements) {
  element.classList.add('newClass');
    
  for (let className in classes) {
    element.classList.remove(className);    
  }
}

 .box { 
  display: block;
  width: 100%;
  height: 20px;
  margin: 0 0 20px 0;
}

.class1 { background: red; }
.class2 { background: green; }
.class3 { background: blue; }

.newClass { background: yellow; }

 <div class="box class1"></div>
<div class="box class2"></div>
<div class="box class3"></div>

1. @Devlin это работает, за исключением второй части, исходный класс не удаляется. Спасибо за это. Если бы вы могли помочь с удалением classx, это было бы здорово. Тем временем я попытаюсь разобраться с этой частью.

2. Я разобрался с этим. Мне нравится, когда людям нравятся те, кто добавил решения по этому вопросу, спасибо вам всем. const classes = [‘.class1’, ‘.class2’, ‘.class3’]; const elements = документ. querySelectorAll(classes.join(‘,’)); const classNames = [‘class1’, ‘class2’, ‘class3’]; console.log(элементы); console.log(имена классов); для (пусть элемент элементов) { element.classList.add(‘NewClass’); для (пусть className имен классов) { element.classList.remove(className); } }

Ответ №2:

Вы можете объединить 2 коллекции:

 var srtClass1 = [...document.getElementsByClassName('class1'), ...document.getElementsByClassName('class2')];
for(var i = 0; i < srtClass1.length; i  ) {
    srtClass1[i].classList.add('newClass');
    srtClass1[i].classList.remove('class1');
    srtClass1[i].classList.remove('class2');
}

И вы можете использовать функции более высокого порядка:

 [...document.getElementsByClassName('class1'), ...document.getElementsByClassName('class2')].forEach( el => {
    el.classList.add('newClass');
    el.classList.remove('class1');
    el.classList.remove('class2');
});

И даже лучше (поскольку classList.remove поддерживает несколько аргументов):

 [...document.getElementsByClassName('class1'), ...document.getElementsByClassName('class2')].forEach( el => {
    el.classList.add('newClass');
    el.classList.remove('class1', 'class2');
});

Или, если вы хотите, вы можете использовать querySelectorAll :

 document.querySelectorAll('.class1, .class2').forEach(el => {
    el.classList.add('newClass');
    el.classList.remove('class1', 'class2');
});

Ответ №3:

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

 function changeClasses() {
  let classNames = ['class1', 'class2'];

  classNames.forEach(className => {
    const node = document.querySelector(`.${className}`);
    
    if (node != null) {
      node.classList.add('newClass');
      node.classList.remove(className);
    }
  });
}

 .class1 {
  color: green;
}

.class2 {
  color: blue;
}

.newClass {
  color: red;
}

 <body>
  <div class="class1">class1</div>
  <div class="class2">class2</div>
  
  <button onclick="changeClasses()">Change classes</button>
</body>