Как переключить класс у нескольких элементов?

Question

[Дмитрий Нефёдов]

Как прописать все классы в querySelector в одну строку, например

document.querySelector('.menu-class-a, menu-class-b,' menu-class-c).classList.toggle('active');

?

document.querySelector('.menu-mobile').onclick = function() {
  document.querySelector('.menu-class-a').classList.toggle('active');
  document.querySelector('.menu-class-b').classList.toggle('active');
  document.querySelector('.menu-class-c').classList.toggle('active');
};

Comments

[Дмитрий Нефёдов]

Я выше в примере указал классы через запятую, но так не работает

[Дмитрий Нефёдов]

document.querySelector('.menu-class-a, .menu-class-b,' .menu-class-c).classList.toggle('active');

И так:

document.querySelector('menu-class-a, menu-class-b,' menu-class-c).classList.toggle('active');

Не работает.

[godsplane]

Дмитрий Нефёдов, вам редактор ошибк не подсвечаивает?
.querySelectorAll('.class1, .class2, .class3')

[Максим]

Дмитрий Нефёдов, вы же сами пишите - .querySelector что говорит о выборе ОДНОГО ЭЛЕМЕНТА

Answer 1

[v3shin]

1. исправить опечатку в выборке элементов
2. использовать не querySelector, а querySelectorAll для выбора всех элементов, а не одного
3. выбрав все элементы, разбираться с ними поодиночке

document.querySelectorAll('.menu-class-a, .menu-class-b, .menu-class-c').forEach(elem => elem.classList.toggle('active'));

Answer 2

[imko]

Через комбинатор запятую

Answer 3

[sharpsss]

не проверял но по идеи всё окс должно быть, если с запятыми в падлу ему работать будет тогда прост пробелы поставь а запятые убери

const over = document.querySelectorAll('div.filter, div.chapalak_avtoru_voprosa, div.ninja_america, div.god_of_war');
			    for(var n = 0; n < over.length; n++) {
    over[n].classList.toggle('acho');
  }

const row = document.querySelector('.row , .kavo');
row.classList.toggle('color_swap');

Answer 4

[Ярослав Вавилин]

https://developer.mozilla.org/en-US/docs/Web/API/D...

https://codesandbox.io/s/hungry-oskar-36x8zl?file=...
что то вроде этого?