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

Why wont my onclick not remove any of my classes?

本文关键字：我的 任何类 删除 onclick 为什么      更新时间：2023-09-26

我遇到了一个大问题
我不能随心所欲地工作。。所以我希望这里有人能帮助我。

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

我希望它显示：没有；我的每一个class="nice"，所以你只能看到class="video"，但什么都没发生。

您选择的是类的元素，而不是类本身。因此，您必须遍历元素，因为javascript只能编辑DOM中的内容，而不能编辑影响元素的CSS类。因此，getElementsByClassName返回一个节点数组，我们必须在其中循环并隐藏每个节点。点击下面的运行片段查看这项工作

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

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>

演示

将代码更改为类似的内容：

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

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

jsfiddle

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

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

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

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

相关文章：