Как нескольким определенным классам правильно добавить один общий класс через JS

Question

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

Вариант 1:

$('css-class-1').addClass('css-general-1');
$('css-class-2').addClass('css-general-1');
$('css-class-3').addClass('css-general-1');
$('css-class-4').addClass('css-general-1');
$('css-class-5').addClass('css-general-1');
$('css-class-6').addClass('css-general-1');
$('css-class-7').addClass('css-general-1');
$('css-class-8').addClass('css-general-1');
$('css-class-9').addClass('css-general-1');
$('css-class-10').addClass('css-general-1');
$('css-class-11').addClass('css-general-1');
$('css-class-12').addClass('css-general-1');

Копаясь в вопросах, кажется, нашел более правильное решение.

Вариант 2:

for (var element of document.querySelectorAll(".css-class-1, .css-class-2, ... .css-class-12")) {
  element.classList.add("css-general-1");}

Но правильно ли так в одну длинную строку писать много css классов? Есть варианты, как было бы грамотнее, на чистом JS?

Answer 1

Вы можете использовать css селектор по атрибуту class.

for (var element of document.querySelectorAll("[class^=css-class-]")) {element.classList.add("css-general-1");}

В этом коде querySelector выберет все теги с классом начинающимся с css-class-

https://developer.mozilla.org/ru/docs/Web/CSS/Attribute_selectors

function addClass() {
  for (var element of document.querySelectorAll("[class^=css-class-]")) {
    element.classList.add("css-general-1");
  }
}

div {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 4px solid red;
}

.css-general-1 {
  background-color: red;
}

<div class="css-class-1"></div>
<div class="css-class-2"></div>
<div class="css-class-3"></div>
<div class="css-class-4"></div>
<div class="css-class-5"></div>
<div class="css-class-6"></div>
<div class="css-class-7"></div>
<div class="css-class-8"></div>
<div class="css-class-9"></div>
<div class="css-class-10"></div>
<div class="css-class-11"></div>
<div class="css-class-12"></div>
<br>
<button class="button" onClick="addClass()">Добавить класс</button>

Answer 2

Решения вопроса с использованием JQuery и чистого JS:

// На JQuery
$('#add-class').click(() => {
    $('.container').children().addClass('active')
})
$('#remove-class').click(() => {
    $('.container').children().removeClass('active')
})

// На чистом JS
const parentElement = document.querySelector('.container')
const childrenElements = Array.from(parentElement.children)
const addClassBtn = document.getElementById('add-class')
const removeClassBtn = document.getElementById('remove-class')
addClassBtn.addEventListener('click', () => {
    childrenElements.forEach(element => {
        element.classList.add('active')
    });
})
removeClassBtn.addEventListener('click', () => {
    childrenElements.forEach(element => {
        element.classList.remove('active')
    });
})

.active {
  color: red;
}

<div class="container">
      <div class="weqwe">Lorem ipsum dolor sit amet.</div>
      <div class="dasdasd">Lorem ipsum dolor sit amet.</div>
      <div class="fdvdfa">Lorem ipsum dolor sit amet.</div>
      <div class="wcdgshfsaf">Lorem ipsum dolor sit amet.</div>
      <div class="kjdhvpashdpdsa">Lorem ipsum dolor sit amet.</div>
      <div class="dkjhaksjdhvicuhap">Lorem ipsum dolor sit amet.</div>
      <div class="lsjfpiusfoiduspfsd">Lorem ipsum dolor sit amet.</div>
  </div>
  <button id="add-class">Добавить класс</button>
  <button id="remove-class">Удалить класс</button>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

БЛОГ НА HUSL

Как нескольким определенным классам правильно добавить один общий класс через JS

Ответы (2 шт):