影响具有共享类的所有节点

Question

我有一个包含 div 的页面，每个 div 都有多个类。

<div class='publication parent20'></div>
<div class='publication parent12 parent42 parent91'></div>
<div class='publication parent20'></div>
<div class='publication parent32 parent23'></div>

我需要一个函数，它将一个类作为变量传递给它，将所有具有发布类的 div 的样式设置为 none，然后设置具有指定类的标签。

function swap_pub(pub){
  document.getElementById("publication").style.display = "none";
  //set style.display = "block" to all elements with class = pub

} 

关于我将如何做到这一点的任何想法。

Answer 1

使用 getElementsByClassName()^MDN

var pubs = document.getElementsByClassName('publication'); // a NodeList

for (var i = 0; i < pubs.length; i++) {
    pubs[i].style.display = 'block';
}

这是使用 jQuery 的样子：

$('.publication').show(); // concise

Answer 2

还有 querySelectorAll，它的支持范围比 getElementsByClassName 稍微广泛一些。

function setDisplay(className, display) {
    var items = document.querySelectorAll('.' + className); 
    var i = items.length;
    while (i--) {
      items[i].style.display = display;
    }
}