javascript - 如果选择单选按钮 Show Div - 8 Radio Buttons/8 Divs - 这可以简化吗？

Question

基本上，我想要 8 个单选按钮。如果选择了一个单选按钮，则下面会显示一个 div。如果选择了另一个按钮，则会显示另一个 div。一次只显示一个 div，如果(最初)没有选择按钮，则不显示任何 div。

这是我的 HTML，它是相当标准的，我并没有试图根据我的需要改进它。

<form id='group'>
    <label><input type="radio" name="group1" class="sim-micro-btn"/></label>
    <label><input type="radio" name="group1" class="sim-mini-btn"/></label> 
    <label><input type="radio" name="group1" class="sim-maxi-btn"/></label>
    <label><input type="radio" name="group1" class="sim-mega-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-micro-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-mini-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-maxi-btn"/></label>
</form>

<div class="billpay-internet-add-ons">
    <div class="sim-micro-desktop">sim-micro</div>
    <div class="sim-mini-desktop">sim-mini</div>
    <div class="sim-maxi-desktop">sim-maxi</div>
    <div class="sim-mega-desktop">sim-mega</div>
    <div class="phone-smart-micro-desktop">phone-smart-micro</div>
    <div class="phone-smart-mini-desktop">phone-smart-mini</div>
    <div class="phone-smart-desktop">phone-smart</div>
    <div class="phone-smart-maxi-desktop">phone-smart-maxi</div>
</div>

然而，这是我的脚本，它看起来相当忙乱，在我继续之前我想知道有没有办法让这个更简单一点？

$(document).ready(function(){
    $('.sim-micro-desktop').hide();
    $('.sim-mini-desktop').hide();
    $('.sim-maxi-desktop').hide();
    $('.sim-mega-desktop').hide();
    $('.phone-smart-micro-desktop').hide();
    $('.phone-smart-mini-desktop').hide();
    $('.phone-smart-desktop').hide();
    $('.phone-smart-maxi-desktop').hide();


    $('form#group').click(function(){
        if($('.sim-micro-btn').is(":checked")){
            $('.sim-micro-desktop').show();
        } else {
            $('.sim-micro-desktop').hide();
        }     

        if($('.sim-mini-btn').is(":checked")){
            $('.sim-mini-desktop').show();
        } else {
            $('.sim-mini-desktop').hide();
        }     

        if($('.sim-maxi-btn').is(":checked")){
            $('.sim-maxi-desktop').show();
        } else {
            $('.sim-maxi-desktop').hide();
        }  

        if($('.sim-mega-btn').is(":checked")){
            $('.sim-mega-desktop').show();
        } else {
            $('.sim-mega-desktop').hide();
        }  

        if($('.phone-smart-micro-btn').is(":checked")){
            $('.phone-smart-micro-desktop').show();
        } else {
            $('.phone-smart-micro-desktop').hide();
        }  

        if($('.phone-smart-mini-btn').is(":checked")){
            $('.phone-smart-mini-desktop').show();
        } else {
            $('.phone-smart-mini-desktop').hide();
        }  

        if($('.phone-smart-btn').is(":checked")){
            $('.phone-smart-desktop').show();
        } else {
            $('.phone-smart-desktop').hide();
        }  

        if($('.phone-smart-maxi-btn').is(":checked")){
            $('.phone-smart-maxi-desktop').show();
        } else {
            $('.phone-smart-maxi-desktop').hide();
        }  

          });


});

Answer 1

首先将共享类放在 radio 按钮和显示内容的 div 元素上。在我的示例中，我分别使用了 trigger 和 content。然后向单选按钮添加一个 data 属性，以确定点击时应显示哪个 div。

简化示例:

<form id='group'>
    <label>
        <input type="radio" name="group1" class="sim-micro-btn trigger" data-rel="sim-micro-desktop" />
    </label>
</form>
<div class="billpay-internet-add-ons">
    <div class="sim-micro-desktop content">sim-micro</div>
</div>

那么你只需要像这样的 1 个点击处理程序:

$(document).ready(function(){
    $('.trigger').click(function() {
        $('.content').hide();
        $('.' + $(this).data('rel')).show();
    });
});

然后，您还可以使用 CSS 隐藏 div 元素，而无需 jQuery - 样式应始终在 CSS 中完成，因为它可以更好地分离关注点。

.content {
    display: none;
}

Example fiddle