将属性应用于整个类

问题描述

这是我与 JavaScript 的最新争论。我正在尝试通过 Javascript 将 display: none 应用于整个类的所有内容，但我的 Javascript 在 setAttribute、getAttribute 和 removeAttribute 处一直失败。无论我在网上看到多少示例，我都无法让它发挥作用。

我的内容包含一系列剧透，评分从 1 到 99。用户可以选择要隐藏的剧透的最低“评分”（例如，任何评分为 10 及以上、20 及以上、24 及以上、96 和起来，随便）。

我的函数是从一个名为 readingspoilers 的下拉菜单中调用的，因此在 readingspoilers 中选择的任何内容都会通过 onChange 事件传递给 JavaScript 函数。因此，在下拉列表中选择的任何值都会作为 maxnumber 传递给我的函数。

我的 JavaScript 代码是这样的：

function hideSpoilers(maxnumber) {
    var hideUntil = document.getElementById('readingspoilers');
    var spoilerClass;
    for(var elementCounter = 0; elementCounter < maxnumber; elementCounter++) {
//This for loop makes sure that the function goes from 0 to the max and either shows or hides each element of hidespoilers## (from 0 to maxnumber)
            spoilerClass = getElementsByClassName('hidespoilers' + elementCounter);
            if(elementCounter > hideUntil.value) {
                element.setAttribute('display','none');   //the function fails here
            } else {
               element.removeAttribute('display');        //the function also fails here
            }
        }
    }

本质上该函数可以很好地完成什么都不做。

该函数被正确调用，并且 maxnumber 值被正确传递。通过一系列 window.alert 调用，我可以看出失败的是 setAttribute 和 removeAttribute 调用。打开或关闭一个简单的显示设置是如何杀死我的 JavaScript 的？谁能指出哪里出了问题？

解决方法

display:none 不是属性，而是 CSS，因此您不会将任何 DOM 属性方法与它一起使用。相反，您只需设置另一个 CSS 类，并在需要时使用 .classList.add() 添加该类。您也可以使用 .classList.remove() 和 .classList.toggle()。超级简单。

这是一个例子：

document.querySelector("button").addEventListener("click",function(){
  // Find and loop over all the classes that need to be affected
  document.querySelectorAll(".something").forEach(function(element){
    element.classList.add("hidden");  // Add the class that you want to add
  });
});

.something { color:red; }
.hidden { display:none; }

<button>Hide the somethings</button>
<div class="something">something</div>
<div class="somethingElse">Something Else</div>
<div class="something">something</div>
<div class="somethingElse">Something Else</div>
<div class="something">something</div>
<div class="somethingElse">Something Else</div>
<div class="something">something</div>

要使用 Javascript 设置 CSS，您需要设置该元素的 .style：

if(elementCounter > hideUntil.value) {
  element.style.display = "none";
} else {
  element.style.display = null;
}

html inline-styles javascript