如何使用 Javascript 更改具有相同类名的多个元素？

Question

跟进 我之前的问题——我想使用一个按钮来使用 JS 显示/隐藏具有相同类名的多个元素，但似乎我只能更改具有特定类名的第一个元素，以及所有其他元素页面上的相同类将被忽略。

我该如何解决？

 	function designInfo() {
		document.getElementsByClassName("design")[0].style.display = "block";
		document.getElementsByClassName("it")[0].style.display = "none";
		document.getElementsByClassName("other")[0].style.display = "none";
	}

	function itInfo() {
		document.getElementsByClassName("design")[0].style.display = "none";
		document.getElementsByClassName("it")[0].style.display = "block";
		document.getElementsByClassName("other")[0].style.display = "none";
	}

	function allInfo() {
		document.getElementsByClassName("design")[0].style.display = "block";
		document.getElementsByClassName("it")[0].style.display = "block";
		document.getElementsByClassName("other")[0].style.display = "block";
	}

     .it {}
    .design {}
    .other {}

    .indent {
      margin: .5em 1em .5em 1em;
    }

     <button onclick="designInfo()">show design stuff</button>
    <button onclick="itInfo()">show IT stuff</button>
    <button onclick="allInfo()">show all</button>

    <div class="indent">

       <div class="it">• boring IT stuff</div>
       <div class="design">• cool design stuff</div>
       <div class="it">• it stuff and things</div>
       <div class="design">• design stuff</div>
       <div class="it">• it stuff and more</div>
       <div class="other">• more it stuff</div>
       <div class="other">• it stuff</div>

    </div>

原文由 escapetomars 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要对从 document.getElementsByClassName() 方法获得的所有项目使用 for 循环，如以下代码段所示：

 function setDisplay(className, displayValue) {
  var items = document.getElementsByClassName(className);
  for (var i=0; i < items.length; i++) {
    items[i].style.display = displayValue;
  }
}

function designInfo() {
  setDisplay("design", "block");
  setDisplay("it", "none");
  setDisplay("other", "none");
}

function itInfo() {
  setDisplay("design", "none");
  setDisplay("it", "block");
  setDisplay("other", "none");
}

function allInfo() {
  setDisplay("design", "block");
  setDisplay("it", "block");
  setDisplay("other", "block");
}

 .it {}
.design {}
.other {}

.indent {
  margin: .5em 1em .5em 1em;
}

 <button onclick="designInfo()">show design stuff</button>
<button onclick="itInfo()">show IT stuff</button>
<button onclick="allInfo()">show all</button>

<div class="indent">

   <div class="it">• boring IT stuff</div>
   <div class="design">• cool design stuff</div>
   <div class="it">• it stuff and things</div>
   <div class="design">• design stuff</div>
   <div class="it">• it stuff and more</div>
   <div class="other">• more it stuff</div>
   <div class="other">• it stuff</div>

</div>

---

更新 此外，它可以用更少的代码编写如下：

 function filter(designDisp, itDisp, otherDisp) {
  setDisplay("design", designDisp);
  setDisplay("it", itDisp);
  setDisplay("other", otherDisp);
}

function setDisplay(className, displayValue) {
  var items = document.getElementsByClassName(className);
  for (var i=0; i < items.length; i++) {
    items[i].style.display = (displayValue? "block" : "none");
  }
}

 .it {}
.design {}
.other {}

.indent {
  margin: .5em 1em .5em 1em;
}

 <button onclick="filter(1,0,0)">show design stuff</button>
<button onclick="filter(0,1,0)">show IT stuff</button>
<button onclick="filter(1,1,1)">show all</button>

<div class="indent">

   <div class="it">• boring IT stuff</div>
   <div class="design">• cool design stuff</div>
   <div class="it">• it stuff and things</div>
   <div class="design">• design stuff</div>
   <div class="it">• it stuff and more</div>
   <div class="other">• more it stuff</div>
   <div class="other">• it stuff</div>

</div>

原文由 S.Serpooshan 发布，翻译遵循 CC BY-SA 3.0 许可协议