我在此尝试创建JSFiddle，以便仅当下拉列表中选择的选项与其类相匹配时，无序列表中的项目才可见。列表项可能具有多个类别，但是只要至少一个类别匹配，就应使该项目可见。
Javascript看起来像这样：
function showListCategories() {
var selection = document.getElementById("listDisplayer").selectedIndex;
var unHidden = document.getElementsByClassName(selection);
for (var i = 0; i < unHidden.length; i++) {
unHidden[i].style.display = 'visible';
}
};
这个想法是，它从下拉列表中获取当前选择，根据匹配的类创建一个数组，然后遍历每个项目并将CSS隐藏在每个项目上。
但是，它不起作用。谁能告诉我我要去哪里？
请注意，我尚未编码“全部显示”选项。我认为一旦解决了第一个问题，我也许就能弄清楚这一点。
在您的提琴中更改加载脚本No wrap - in <head>。
只需像下面那样更改您的功能
function showListCategories() {
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = 'none';
}
//above code to reset all lis if they are already shown
var selection = document.getElementById("listDisplayer").value;
lis = document.getElementsByClassName(selection);
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = 'block';
}
};
在css它应该是none不hidden
.cats, .rats, .bats {
display: none;
}
如果要li在showAll选中时显示全部，请all向所有lis添加类。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句