为什么我的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。 这将在以后尝试选择元素时导致错误。

Answer 2

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 3

将您的代码更改为：

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

您必须迭代getElementsByClassName返回的结果。

的jsfiddle

Answer 4

您可以创建一个循环，将遍历所有nice元素，然后显示none这样的： https://jsfiddle.net/7vf9pz8u/

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

Answer 5

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 6

由于您的div没有唯一的名称，因此它们位于数组卡[]中。 因此，要访问特定的div，您需要将该数组引用到该特定的div。 引用的解决方案应该有效。