如何簡化Javascript如果/然後倍數？

我不是編程專家。我試圖讓用戶選擇激活不同的幻燈片，爲此，我需要激活所選的一個，並停用其他的。現在，我有四個幻燈片;但我也可以有20個。而對於20位來說，這樣的代碼真的會顯得很難看：如何簡化Javascript如果/然後倍數？

 function setSlider(val) 
     { 
      if (val == 1) 
      { 
       $('#slider1').nivoSlider(); 
       document.getElementById('slider').style.visibility = 'hidden'; 
       document.getElementById('slider1').style.visibility = 'visible'; 
       document.getElementById('slider2').style.visibility = 'hidden'; 
       document.getElementById('slider3').style.visibility = 'hidden'; 
       document.getElementById('slider4').style.visibility = 'hidden'; 
      } 
      if (val == 2) 
      { 
       $('#slider2').nivoSlider(); 
       document.getElementById('slider').style.visibility = 'hidden'; 
       document.getElementById('slider1').style.visibility = 'hidden'; 
       document.getElementById('slider2').style.visibility = 'visible'; 
       document.getElementById('slider3').style.visibility = 'hidden'; 
       document.getElementById('slider4').style.visibility = 'hidden'; 
      } 
      if (val == 3) 
      { 
       $('#slider3').nivoSlider(); 
       document.getElementById('slider').style.visibility = 'hidden'; 
       document.getElementById('slider1').style.visibility = 'hidden'; 
       document.getElementById('slider2').style.visibility = 'hidden'; 
       document.getElementById('slider3').style.visibility = 'visible'; 
       document.getElementById('slider4').style.visibility = 'hidden'; 
      } 
      if (val == 4) 
      { 
       $('#slider4').nivoSlider(); 
       document.getElementById('slider').style.visibility = 'hidden'; 
       document.getElementById('slider1').style.visibility = 'hidden'; 
       document.getElementById('slider2').style.visibility = 'hidden'; 
       document.getElementById('slider3').style.visibility = 'hidden'; 
       document.getElementById('slider4').style.visibility = 'visible'; 
      } 
     }

我很肯定有更好的實現。像

 function setSlider(val) 
     { 
       $('#slider' . val).nivoSlider(); 
       //loop here from 1 to 20 
       document.getElementById('slider' . val).style.visibility = 'hidden'; 
       // loop end 
       document.getElementById('slider' . val).style.visibility = 'visible'; 
     }

我試過了，但它不工作......任何人都可以給我一個提示，我可以做什麼？非常感謝！

來源

2013-01-09 luftikus143

似乎_iditis的常見情況_...使用類而不是增量型ids一切都會更容易。然後，您可以通過循環內的索引來定位元素。 – elclanrs

喜歡的東西[...]

是啊，你已經得到它。 JavaScript中只有字符串連接運算符是加號，而不是點。對於循環，使用一個簡單的for語句：

function setSlider(val) { 
    $('#slider' + val).nivoSlider(); 
    for (var i = 1; i <= 20; i++) { 
      document.getElementById('slider' + i).style.visibility = 'hidden'; 
    } 
    document.getElementById('slider' + val).style.visibility = 'visible'; 
}

來源

2013-01-09 06:28:46 Bergi

看起來像最優雅的解決方案。和作品（幾乎100％）。試着調整一下。非常感謝大家的幫助。非常感激！ – luftikus143

嘗試用下面的語法： -

function setSlider(val) 
    { 
      $("#slider").hide(); 
      $("#slider"+val).nivoSlider(); 
      //loop here from 1 to 20 
      for(var i = 1;i<=20;i++){ 
       $("#slider"+i).hide(); 
      } 
      // loop end 
      $("#slider"+val).show(); 
    }

來源

2013-01-09 06:20:52

可以考慮開關/ case語句

function setSlider(val) 
     { 
       document.getElementById('slider').style.visibility = 'hidden'; 
       document.getElementById('slider1').style.visibility = 'hidden'; 
       document.getElementById('slider2').style.visibility = 'hidden'; 
       document.getElementById('slider3').style.visibility = 'hidden'; 
       document.getElementById('slider4').style.visibility = 'hidden'; 

switch(val){ 
case 1: 
       $('#slider1').nivoSlider(); 
       document.getElementById('slider1').style.visibility = 'visible'; 
     break; 

case2:   $('#slider2').nivoSlider(); 
       document.getElementById('slider2').style.visibility = 'visible'; 
     break; 
etc,.

這將簡化幫助。

您也可以考慮隱藏case語句之前的所有元素並根據大小寫顯示元素，這會進一步減少代碼並簡化它。

你也可以使用$('#slider"+val).show();

function setSlider(val) 
      { 
        $('#slider').hide(); 
        $('#slider1').hide(); 
        $('#slider2').hide(); 
        $('#slider3').hide(); 
        $('#slider4').hide(); 
        $('#slider'+val).show(); 
}

來源

2013-01-09 06:22:54

如何簡化Javascript如果/然後倍數？

回答

相關問題