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