为什么我的 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="nice"，所以你只能看到class="video"，但什么也没有发生。

Answer 1

getElementsByClassName returns 所有匹配元素的数组，因此您必须提供索引或遍历所有这些元素以更改它们的属性。

将您的代码更改为此

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 2

将您的代码更改为类似的代码：

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

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

jsfiddle

Answer 3

getElementsByClassName会return一个数组，所以我们需要遍历数组，逐一隐藏。

所以最好声明一个函数并定义其中的逻辑。请看下面的例子。

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 4

您 select 是 class 的元素而不是 class 本身。因此，您将不得不遍历元素，因为 javascript 只能编辑 DOM 中的内容，而不能编辑影响您的元素的 CSS classes 中的内容。所以 getElementsByClassName returns 一个节点数组，我们必须在其中循环并隐藏每个节点。点击下面的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。这将在稍后尝试 select 您的元素时导致错误。

Answer 5

由于您的 div 没有唯一名称，因此它们位于数组卡[] 中。因此，要访问特定的 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>

为什么我的 onclick 不会删除我的任何类？

Why wont my onclick not remove any of my classes?

html

javascript

onclick

为什么我的 onclick 不会删除我的任何 类？

Why wont my onclick not remove any of my classes?

html

javascript

onclick

为什么我的 onclick 不会删除我的任何类？