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>

我希望它显示：无;我的每个班级=＆＃34;很好＆＃34;，所以你只能看到class =＆＃34; video＆＃34 ;,但是没有任何事情发生。

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将返回一个数组，因此我们需要遍历数组并逐个隐藏。

因此最好声明一个函数并在其中定义逻辑。请参阅下面的示例。

＆＃13;

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
    }
}

＆＃13;

<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>

＆＃13;

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 返回所有匹配元素的数组，因此您必须提供索引或循环遍历所有匹配元素才能更改其属性。

将您的代码更改为此

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

//对于每个元素

Udemy.com

Answer 6

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

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

6 个答案: