ID元素为不显示

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

它可能稍微多一些c ode，但是它将代码与正在识别的特定元素数量相分离。