Почему мой onclick не удаляет ни один из моих классов?

Question

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

<a href="#" onclick="document.getElementsByClassName('nice').style.display='none';" class="sorter">#NiceToKnow</a> 

<div id="cards" class="nice"></div> 
<div id="cards" class="nice"></div> 
<div id="cards" class="nice"></div> 
<div id="cards" class="video"></div> 

Я хочу его показать: нет; каждый мой класс = «хороший», поэтому вы можете видеть только класс = «видео», но ничего не происходит вообще.

Answer 1

Вы выбираете элементы класса не сам класс. Таким образом, вам придется перебирать элементы, поскольку javascript может редактировать только то, что находится в DOM, а не классы CSS, которые влияют на ваши элементы. Таким образом getElementsByClassName возвращает массив узлов, в которых мы должны прокручивать и скрывать каждый из них. Нажмите runsnippet ниже, чтобы увидеть эту работу

function changeNice(){ 
 
//ASSIGN ELEMENTS TO ARRAY 
 
elementsofClass=document.getElementsByClassName('nice'); 
 
for(i=0; i<elementsofClass.length; i++){ 
 
    //HIDE SELECTED ELEMENT 
 
    elementsofClass[i].style.display='none'; 
 
    
 
    
 
}}

<a href="#" onclick="changeNice();" class="sorter">#NiceToKnow</a> 
 

 
<div id="cards1" class="nice">TEST 1</div> 
 
<div id="cards2" class="nice">TEST 2</div> 
 
<div id="cards3" class="nice">TEST 3</div> 
 
<div id="cards4" class="video">I don't HIDE</div>

Также не используйте дубликат ID. Это приведет к ошибкам позже при попытке выбрать ваши элементы.

Answer 2

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

Изменить код этого

document.getElementsByClassName('nice')[0].style.display='none' 

// Для каждого элемента

var e = document.getElementsByClassName('nice'); 
for (i = 0; i < e.length; i++) { 
    e[i].style.display = "none"; 
} 

Answer 3

Изменить код на что-то вроде этого:

var elems = document.getElementsByClassName('nice'); 
for(var i = 0; i < elems.length; i++) { 
    elems[i].style.display = 'none' 
} 

Вы должны итерацию по результатам возвращается getElementsByClassName.

jsfiddle

Answer 4

The getElementsByClassName возвращает массив, так что нам нужно перебирать массив и спрятать один за другим.

Так что лучше объявить функцию и определить логику внутри этого. См. Пример ниже.

window.hideAllniceClass = function() { 
 
    var elems = document.getElementsByClassName('nice'); 
 
    for (var i = 0; i != elems.length; ++i) { 
 
     elems[i].style.display = "none"; // hidden has to be a string 
 
    } 
 
}

<a href="#" onclick="hideAllniceClass();" class="sorter">#NiceToKnow</a> 
 

 
<div id="cards1" class="nice">Test Content</div> 
 
<div id="cards2" class="nice">Test Content</div> 
 
<div id="cards3" class="nice">Test Content</div> 
 
<div id="cards4" class="video">Test Video Content</div>

DEMO

Answer 5

Поскольку у ваших divs нет уникальных имен, они находятся в массивах карт []. Чтобы получить доступ к определенному div, вам нужно ссылаться на массив на этот конкретный div. Запрашиваемое решение должно работать.

Answer 6

Вы можете создать цикл, который будет цикл через все nice элементов, а затем отображать none так: https://jsfiddle.net/7vf9pz8u/

<script> 
    function hide(){ 
    for(ct=0; ct < 3; ct++){ 
    document.getElementsByClassName('nice')[ct].style.display='none' 
    } 
    } 
</script>