如何使用Javascript更改具有相同类名的多个元素? [英] How do I change multiple elements with same class name using Javascript?

问题描述

关注我之前的问题-我想使用按钮来显示/隐藏同一类的多个元素使用JS命名，但似乎只能更改具有特定类名称的第一个元素，而页面上具有相同类的所有其他元素都将被忽略.

Follow up to my previous question - I want to use a button to show / hide multiple elements with the same class name using JS, yet it appears that I can only change the first element with a certain class name, and all further elements with the same class on the page are ignored.

我该如何解决?

	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>

推荐答案

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

You need to use a for-loop over all items you get from document.getElementsByClassName() method as in following snippet:

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>

更新 另外，它可以用更少的代码编写，如下所示:

Update Also, it could be written with less code as below:

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>

这篇关于如何使用Javascript更改具有相同类名的多个元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！