不显示的 ID 元素答案

【问题标题】：ID element to not display不显示的 ID 元素
【发布时间】：2014-11-27 10:25:42
【问题描述】：

我有这个代码：

function showForm()
{
    var a=document.getElementById("opts").value;
    if(a==1)
    {
        document.getElementById("f1").style.display="block";
        document.getElementById("f2").style.display="none";
        document.getElementById("f3").style.display="none";
        document.getElementById("f4").style.display="none";
        document.getElementById("f5").style.display="none";
        document.getElementById("f6").style.display="none";
        document.getElementById("f7").style.display="none";
        document.getElementById("f8").style.display="none";
        document.getElementById("f9").style.display="none";
        document.getElementById("f10").style.display="none";
        document.getElementById("f11").style.display="none";
        document.getElementById("f12").style.display="none";
        document.getElementById("f13").style.display="none";
        document.getElementById("f14").style.display="none";
        document.getElementById("f15").style.display="none";
        document.getElementById("f16").style.display="none";
        document.getElementById("f17").style.display="none";
        document.getElementById("f18").style.display="none";
        document.getElementById("f19").style.display="none";
        document.getElementById("f20").style.display="none";
        document.getElementById("f21").style.display="none";
        document.getElementById("f22").style.display="none";
        document.getElementById("f23").style.display="none";
        document.getElementById("f24").style.display="none";
        document.getElementById("f25").style.display="none";
        document.getElementById("f26").style.display="none";
        document.getElementById("f27").style.display="none";
        document.getElementById("f28").style.display="none";
        document.getElementById("f29").style.display="none";
        document.getElementById("f30").style.display="none";
        document.getElementById("f31").style.display="none";
        document.getElementById("f32").style.display="none"
    }
    if(a==2)
    {
        //...
    }
}

有没有可能让这个js变小？

我将它用于双下拉选择器中的网站www.borrani.com

【问题讨论】：

标签： toggle visibility

【解决方案1】：

循环当然可以使它更小：

for (var i = 1; i <= 32; i++) {
    document.getElementById('f' + i).style.display = 'none';
}
document.getElementById('f1').style.display = 'block';

您甚至可以尝试querySelectorAll 根据模式显式识别您的元素，假设您可以仅为您想要的元素定义一个独特的模式：

var elements = document.querySelectorAll('[id^="f"]');
for (var i = 0; i < elements.length; i++) {
    elements[i].style.display = 'none';
}
document.getElementById('f1').style.display = 'block';

它可能会稍微多一些代码，但它将代码与被识别的特定数量的元素分离。

【讨论】：