如何有效使用js.hidden
如何有效使用js.hidden
提问于 2022-04-25 01:14:59
<table>
<tr><tr>
<tr id = select>custom dropdown select tag <tr>
<tr id = div1><tr>
<tr id = div2><tr>
<tr id = div3><tr>
<tr id = div4><tr>
<tr><tr>
<tr><tr>
</table> 我在寻找一种高效的使用js的方法。隐藏的，如果getElementById(select) =1，则应该只显示带有id 1的tr标记，如果应该显示getElementById(select) =3，id =div1 1，div2，div3。
if(document.getelementbyid("select")value == 2){
document.getelementbyid("div1").hidden = false ;
document.getelementbyid("div2").hidden = false ;
document.getelementbyid("div1").hidden = true;
document.getelementbyid("div2").hidden = true;
}
else {
document.getelementbyid("div1").hidden = false ;
document.getelementbyid("div2").hidden = false ;
document.getelementbyid("div1").hidden = false ;
document.getelementbyid("div2").hidden = false ;
}类似地，我重复所有的值，但我想知道最有效的方法，因为我在表中有许多具有不同id的tr标记，我只想在具有id的select标记之后更改特定的12个id。
回答 2
Stack Overflow用户
发布于 2022-04-25 01:28:56
使用类或其他特性对元素进行分组。
const select = document.getElementById("select");
select.addEventListener('change', () => {
Array.from(document.getElementsByClassName("group")).forEach(el => { el.hidden = true; });
const value = +select.value;
for (let i = 1; i <= value; ++i) {
document.getElementById("div" + i).hidden = false;
}
});<table>
<tr><tr>
<tr><td><select id="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected>4</option>
</select></td></tr>
<tr><td><div id="div1" class="group">A</div></td></tr>
<tr><td><div id="div2" class="group">B</div></td></tr>
<tr><td><div id="div3" class="group">C</div></td></tr>
<tr><td><div id="div4" class="group">D</div></td></tr>
<tr><tr>
<tr><tr>
</table>
Stack Overflow用户
发布于 2022-04-25 02:13:16
我认为有一个地图来处理这种情况是最好的。
const ValueMap = {
1: {
'div1': true
}
}
elements.forEach(item => {
item.hidden = !!ValueMap(value)[item.id]
})
// if Elements of many
const elements2 = docments.querySelectAll('tr[id^='div']')
elements2.forEach(item => {
const id = item.id.replace(/[^0-9]/ig, "");
if (+id <= value) {
item.hidden = true
} else {
item.hidden = false
};
})
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71993587
复制相关文章
相似问题
腾讯云开发者
