为什么我的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>

我希望它显示:none; 我的每一个班级="很好",所以你只能看到class ="video",但根本没有任何事情发生.

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.这将在以后尝试选择元素时导致错误.