2011-05-11 65 views
0

我寫了一個腳本,顯示/隱藏div取決於選中哪個複選框。我在下面寫的代碼工作正常,但...縮短jQuery的多個div /複選框

有沒有一種方法來縮短此代碼,而不必重複每個額外的複選框/ div的if/else語句我需要添加?

$(function() { 
    $("#submit_button").click(function(){ 
     if ($("input[value='poster1']:checked").val()){ 
      $("#results1").show(); 
     } 
     else { 
      $("#results1").hide(); 
     } 
     if ($("input[value='poster2']:checked").val()){ 
      $("#results2").show(); 
     } 
     else { 
      $("#results2").hide(); 
     } 
     if ($("input[value='poster3']:checked").val()){ 
      $("#results3").show(); 
     } 
     else { 
      $("#results3").hide(); 
     } 

}); 
+0

做你格#結果有靜態的?或者它們可以動態生成?開始一個jsfiddle http://jsfiddle.net/zSmgV/ – chrisjlee 2011-05-11 22:19:17

回答

0
$("#submit_button").click(function() { 
    $('input').each(function(i,el){ 
     var $el = $(el), 
      num = $el.val().match(/poster(\d*)/)[1]; 
     if ($el.filter(':checked').length) { 
      $('#results'+num).show(); 
     } else { 
      $('#results'+num).hide(); 
     } 
    }); 
}); 

Demo →

+0

i變量的價值是什麼? – SIFE 2011-05-11 22:25:59

+1

這是目前的指數,請參閱:http://api.jquery.com/each/ – 2011-05-11 22:30:03

+0

正是我在找什麼!謝謝你mVChr! – Dawn 2011-05-11 23:14:01