Используйте getElementsByClassName для выбора 2 классов, один из которых является переменной функции

#javascript

Вопрос:

В функции Javascript я хотел бы выбрать все элементы, которые являются class1 И class2. Но где «class1» = X, а X — переменная myfunction(X).

Пример:

 function myfunction(X) {
 var list = document.getElementsByClassName(X, "class2");
 var listAll = document.getElementsByClassName("All");
 
     for(var t=0;t<listAll.length;t  )
    listAll[t].style.display="none";
    
     for(var y=0;y<list.length;y  )
    list[y].style.display="block";
 
}

 <button onclick="myfunction('class1')">Click to select only class1 X 2</button>
<button class="All class1">Class: 1</button>
<button class="All class1 class2">Class: 1 X 2</button>
<button class="All class2">Class: 2</button>

Развернуть фрагмент

Как я могу изменить var list = document.getElementsByClassName(X, «class2») только на целевой элемент, относящийся к классам 1 И 2?

Спасибо!

Ответ №1:

getElementsByClassName принимает один аргумент, который представляет собой разделенный пробелом список классов, которые должен иметь каждый элемент в результате. Итак:

 var list = document.getElementsByClassName(X   " class2");
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^

Живой Пример:

 function myfunction(X) {
 var list = document.getElementsByClassName(X   " class2");
 var listAll = document.getElementsByClassName("All");
 
     for(var t=0;t<listAll.length;t  )
    listAll[t].style.display="none";
    
     for(var y=0;y<list.length;y  )
    list[y].style.display="block";
 
}

 <button onclick="myfunction('class1')">Click to select only class1 X 2</button>
<button class="All class1">Class: 1</button>
<button class="All class1 class2">Class: 1 X 2</button>
<button class="All class2">Class: 2</button>

Развернуть фрагмент

В качестве альтернативы, вы можете присвоить любому селектору CSS (включая селектор составного класса) значение querySelectorAll для получения моментального NodeList снимка вместо живого HTMLCollection .

1. Это хорошо, большое спасибо! Если я правильно понял, пробел необходим перед class2, чтобы соответствовать стилю листинга живой коллекции HTML? В любом случае, спасибо, это была сложная деталь

2. @Naga — Это просто способ getElementsByClassName работы, если вы хотите сопоставить несколько классов, вы перечисляете классы с пробелами в них : .getElementsByClassName("class1 class2") . Поскольку X в нем не будет пробела, я включил его в следующую за ним строку. (Пробелы в начале или конце строки игнорируются.)

Ответ №2:

Просто используйте querySelectorAll

 var list = document.querySelectorAll(".class1.class2");

Также используйте EventListener и classList.toggle

 document.getElementById("sel").addEventListener("click",function() {
  [...document.querySelectorAll(".All")].forEach(el => el.classList.toggle("hide",1));
  [...document.querySelectorAll(".class1.class2")].forEach(el => el.classList.toggle("hide",0));
})

 .hide { display: none }

 <button type="button" id="sel" >Click to select only class1 X 2</button>
<button type="button" class="All class1">Class: 1</button>
<button type="button" class="All class1 class2">Class: 1 X 2</button>
<button type="button" class="All class2">Class: 2</button>

Развернуть фрагмент

Если вы хотите передать класс, попробуйте это:

 document.getElementById("sel").addEventListener("click",function() {
  [...document.querySelectorAll(".All")].forEach(el => el.classList.toggle("hide",1));
  [...document.querySelectorAll(this.dataset.select ".class2")].forEach(el => el.classList.toggle("hide",0));
})

 .hide { display: none }

 <button type="button" id="sel" data-select=".class1">Click to select class1 plus class 2</button>
<button type="button" class="All class1">Class: 1</button>
<button type="button" class="All class1 class2">Class: 1 X 2</button>
<button type="button" class="All class2">Class: 2</button>

Развернуть фрагмент