如何減少此腳本？

我想在這個腳本中使用循環，但我沒有任何想法如何做到這一點。如何減少此腳本？

這是我曾嘗試：

$('#choice').change(function(){ 

     if ($('#choice').val()=='') 

     { 
      $('#topic1').hide(); 
      $('#topic2').hide(); 
      $('#topic3').hide(); 
      $('#topic4').hide(); 
      $('#topic5').hide(); 
      $('#topic6').hide(); 
      $('#topic7').hide(); 
     }if ($('#choice').val()=='1') 
     { 
      $('#topic1').show(); 
      $('#topic2').hide(); 
      $('#topic3').hide(); 
      $('#topic4').hide(); 
      $('#topic5').hide(); 
      $('#topic6').hide(); 
      $('#topic7').hide(); 
     } 
     if ($('#choice').val()=='2') 
     { 
      $('#topic1').show(); 
      $('#topic2').show(); 
      $('#topic3').hide(); 
      $('#topic4').hide(); 
      $('#topic5').hide(); 
      $('#topic6').hide(); 
      $('#topic7').hide(); 
     } 
     if ($('#choice').val()=='3') 
     { 
      $('#topic1').show(); 
      $('#topic2').show(); 
      $('#topic3').show(); 
      $('#topic4').hide(); 
      $('#topic5').hide(); 
      $('#topic6').hide(); 
      $('#topic7').hide(); 
     } 
     if ($('#choice').val()=='4') 
     { 
      $('#topic1').show(); 
      $('#topic2').show(); 
      $('#topic3').show(); 
      $('#topic4').show(); 
      $('#topic5').hide(); 
      $('#topic6').hide(); 
      $('#topic7').hide(); 
     } 
     if ($('#choice').val()=='5') 
     { 
      $('#topic1').show(); 

      $('#topic2').show(); 

      $('#topic3').show(); 

      $('#topic4').show(); 

      $('#topic5').show(); 

      $('#topic6').hide(); 

      $('#topic7').hide(); 
     } 
     if ($('#choice').val()=='6') 

     { 
      $('#topic1').show(); 

      $('#topic2').show(); 

      $('#topic3').show(); 

      $('#topic4').show(); 

      $('#topic5').show(); 

      $('#topic6').show(); 

      $('#topic7').hide(); 
     } 
      if ($('#choice').val()=='7') 
     { 
      $('#topic1').show(); 

      $('#topic2').show(); 

      $('#topic3').show(); 

      $('#topic4').show(); 

      $('#topic5').show(); 

      $('#topic6').show(); 

      $('#topic7').show(); 
     }       
    }); 
    $('#choice').change(); 
    });

煩請幫我在這裏。

來源

2013-01-10 pler_programmer

基本開關罩或循環將做的工作。只需在Jquery中查看這些內容 –

爲您的所有元素設置一個類！ –

試試這個

$('#choice').change(function(){ 
var i; 
for(i=1;i<8;i++) 
{ 
    if(i==$(this).val()) 
    { 
     $('#topic'+i).show(); 
    } 
    else 
    { 
     $('#topic'+i).hide(); 
    } 
} 

}); 

$('#choice').change();

編輯：強化對MrCode的建議。

來源

2013-01-10 07:09:00

+1，一個小改進就是'i == $（this）.val（）':) – MrCode

@MrCode謝謝！已更新 –

Afaik這隻會顯示1'#topic [i]'，同時隱藏所有'#topic [i]'，其中'i！= $（this）.val（）'。 – KooiInc

jQuery的可以使用選擇這樣的：

$('#choice' + i)

然後，你可以使用「我」變量在循環

來源

2013-01-10 07:09:44

$('#choice').change(function(){ 
     $('[id^="topic"]').hide(); 
     var topic = $('#choice').val(); 
     if (topic!='') { 
      $('#topic'+topic).show(); 
     }; 
});   
$('#choice').change();

來源

2013-01-10 07:11:17 Musa

這就是美麗。 + 1 –

這可能是最簡單的方法。 – kylex

看起來可能像下面這樣做：

$('#choice').on('change', function(){ 
    for(var i=1;i<8;i+=1) { 
    var showhide = i <= +$(this).val() ? 'show' : 'hide'; 
    //     ^convert value to numeric 
    $('#topic'+i)[showhide](); 
    } 
});

處理程序根據#choice（顯示或隱藏）的值確定要使用的方法。對於所有#topic[i]其中i（在循環中）較小則#choice的值的方法是show，對於其他#topic[i]該方法是hide。接下來，使用bracket notation執行確定的方法。

來源

2013-01-10 07:20:28 KooiInc

也許這可能是==而不是<=？ –

謝謝你的傢伙，它現在有效。你節省了我的時間。 –

@Hanky Panky：那隻會顯示#topic [i]選定的值，並隱藏其餘的部分。據我所知，OP試圖以選擇值<=選擇的值顯示所有#topic [i]。 – KooiInc

試試這個：

$('#choice').change(function(){ 
     for(var i = 0; i<8; i++) { 
      if($('#choice').val() <= i) { 
       $('#topic' + i).show(); 
      } else { 
       $('#topic' + i).hide(); 
      } 
     } 
    }

來源

2013-01-10 07:34:21 Stiger

如何減少此腳本？

回答

相關問題