Question

我有这段代码：

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

Answer 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';

代码可能略多一些，但它会将代码与正在识别的特定元素数量分开。

要显示的ID元素

1 个答案: