根據jQuery中的單選按鈕選擇的數量顯示/隱藏1-5個輸入框需要清理

Question

我將一些工作完美無瑕但卻非常醜陋的代碼入侵了，我想學會清理它。

有沒有人有更好的建議，那麼這種方法？我使用了一些屬性選擇器來減少重複，但是我仍然需要爲每個硬件設置一個大塊（現在有4個）。我想我可以使用硬件變量的循環？

$('input[name="hwA-qty"]').click(function(){ 
    var selected = $(this).val(); 
    if (selected == 1) { //Hide inputs 2-5 
     $('fieldset[id^="hwA"]').hide(); 
    } 
    if (selected == 2) { //Show inputs 1 & 2 
     $('fieldset#hwA-2').show(); 
     $('fieldset#hwA-3').hide(); 
     $('fieldset#hwA-4').hide(); 
     $('fieldset#hwA-5').hide(); 
    } 
    if (selected == 3) { //Show inputs 1-3 
     $('fieldset#hwA-2').show(); 
     $('fieldset#hwA-3').show(); 
     $('fieldset#hwA-4').hide(); 
     $('fieldset#hwA-5').hide(); 
    } 
    if (selected == 4) { //Show inputs 1-4 
     $('fieldset#hwA-2').show(); 
     $('fieldset#hwA-3').show(); 
     $('fieldset#hwA-4').show(); 
     $('fieldset#hwA-5').hide(); 
    } 
    if (selected == 5) { //Show all inputs 
     $('fieldset[id^="hwA"]').show(); 
    } 
}); 
$('input[name="hwB-qty"]').click(function(){ 
    var selected = $(this).val(); 
    if (selected == 1) { 
     $('fieldset[id^="hwB"]').hide(); 
    } 
    if (selected == 2) { 
     $('fieldset#hwB-2').show(); 
     $('fieldset#hwB-3').hide(); 
     $('fieldset#hwB-4').hide(); 
     $('fieldset#hwB-5').hide(); 
    } 
    if (selected == 3) { 
     $('fieldset#hdPvr2').show(); 
     $('fieldset#hdPvr3').show(); 
     $('fieldset#hdPvr4').hide(); 
     $('fieldset#hdPvr5').hide(); 
    } 
    if (selected == 4) { 
     $('fieldset#hdPvr2').show(); 
     $('fieldset#hdPvr3').show(); 
     $('fieldset#hdPvr4').show(); 
     $('fieldset#hdPvr5').hide(); 
    } 
    if (selected == 5) { 
     $('fieldset[id^="sdPvr"]').show(); 
    } 
}); [...] 

而這裏的HTML：

[...] 
<div class="hardwareValidation"> 

<div class="select"> 
    <label for="hwA-qty">Quantity</label><br /> 
    <label>1 <input type="radio" name="hwA-qty" value="1" checked /></label> 
    <label>2 <input type="radio" name="hwA-qty" value="2" /></label> 
    <label>3 <input type="radio" name="hwA-qty" value="3" /></label> 
    <label>4 <input type="radio" name="hwA-qty" value="4" /></label> 
    <label>5 <input type="radio" name="hwA-qty" value="5" /></label> 
</div> 

<fieldset id="hwA-1"> 
    <div class="input"> 
     <label for="hwA-1-serial">#1 - Box Serial Number</label><br /> 
     <input type="text" name="hwA-1-serial" id="hwA-1-serial" /> 
    </div> 
    <div class="checkbox"> 
     <label> 
      <input type="checkbox" name="hwA-1-override" value=""> Override Validation 
     </label> 
    </div> 
</fieldset>      

<fieldset id="hwA-2"> 
    <div class="input"> 
     <label for="hwA-2-serial">#2 - Box Serial Number</label><br /> 
     <input type="text" name="hwA-2-serial" id="hwA-2-serial" /> 
    </div> 
    <div class="checkbox"> 
     <label> 
      <input type="checkbox" name="hwA-2-override" value=""> Override Validation 
     </label> 
    </div> 
</fieldset> 

</div> [...] 

Answer 1

$('input[name="hwA-qty"]').click(function(){ 
var selected = $(this).val(); 

for(i=1;i<=5;i++){ 
    if(i<=selected)$('fieldset#hwA-'+i).show(); 
    else $('fieldset#hwA-'+i).hide(); 
} 

}

Answer 2

你可以使用nextAll穿越方法，即選擇匹配的元素下面的兄弟姐妹。

$('input[name="hwA-qty"]').click(function(){ 
     var selected = $(this).val(); 
     $("fieldset[id^='hwA-']").show(); 
     $("#hwA-" + selected).nextAll().hide(); 
    }); 

$('input[name="hwA-qty"]:checked').trigger("click"); // Triggers the click event to set to the initial position 

參見：http://jsfiddle.net/GlauberRocha/s4PAG/1/