跟进至我之前的问题 https://stackoverflow.com/q/42389937/2803565- 我想使用 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>
您需要对从中获得的所有项目使用 for 循环document.getElementsByClassName()方法如以下代码片段所示：
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另外，它可以用更少的代码编写，如下所示：
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
