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，但是它將代碼與正在識別的特定元素數量相分離。