根据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/