根据jQuery中单选按钮选择的数量显示/隐藏1-5个输入框，需要清理

I've hacked together something that works flawlessly but it's really ugly code and I want to learn to clean it up.

我已经破解了一些完美无缺的东西，但它真的很丑陋而且我想学会清理它。

Does anyone have a better suggestion then this method? I've used some attribute selectors to cut down the repetition, but I still have to a huge block for each hardware (there are 4 right now). I guess I can use a loop with variables for the hardware?

有没有人有这个方法更好的建议？我已经使用了一些属性选择器来减少重复，但是我仍然需要为每个硬件设置一个巨大的块（现在有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();
    }
}); [...]

And here's the html:

这是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> [...]

2 个解决方案

#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();
}

}

#2

You could use the nextAll traversing method, that selects the following siblings of the matched elements.

您可以使用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

See: http://jsfiddle.net/GlauberRocha/s4PAG/1/

请参阅：http：//jsfiddle.net/GlauberRocha/s4PAG/1/

#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();
}

}

#2