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

          });


});

score 14 · Accepted Answer

首先将共享类放在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;
}

示例小提琴

score 1 · Accepted Answer

div您可以使用 CSS隐藏元素：

.billpay-internet-add-ons div {
  display: none;
}

然后您可以使用的className来target确定div要显示的内容，隐藏所有sibling元素：

$('form#group').click(function(e) {
    var className = e.target.className.replace('btn', 'desktop');    
    $('.' + className).show().siblings().hide();
});

这是一个小提琴

score 0 · Accepted Answer

使用 html5 数据属性）（即 data-mappingclass ）指向您需要显示的相应 div。为所有单选按钮添加相同的类（即radioClass）。

HTML

 <label><input type="radio" name="group1" class="radioClass sim-micro-btn" data-mappingclass="sim-micro-desktop"/></label>
 <label><input type="radio" name="group1" class="radioClass sim-mini-btn" data-mappingclass="sim-mini-desktop"/></label>
 ... //same for others

JS

$('.radioClass').click(function() {
  $('.billpay-internet-add-ons div').hide();
  if(this.checked){
     $('.' + $(this).data('mappingclass').show();
  }
});

score 0 · Accepted Answer

您可以首先使用 CSS 默认隐藏所有内容（可能除了一种形式），这样就可以摆脱这个：

$('.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();

如果您担心，这对没有 javascript 的用户有负面影响 - 他们将永远无法看到其他表单。

接下来，只能检查一个无线电，因此只需找出它正在使用的无线电：

$('input[name=group1]:checked);

但是你为什么要这样做，所以你的收音机有一个更像是点击处理程序：

$('#group input[type="radio"').click(function(){
    //code to show/hide form
});

现在您可以选择如何将单选按钮链接到不同的表单，一种方法是使用 data 属性，因此您可以像这样定义单选：

<label><input type="radio" name="group1" class="phone-smart-maxi-btn" data-form="phone-smart-maxi-desktop"/></label>

您可以像这样访问：

$('input[name=group1]:checked).data("form");

现在您需要做的就是隐藏已经显示的 div，但这可以通过类似使用 data 属性或使用:visible选择器来实现。

score 0 · Accepted Answer

您可以使用选择器来减少此处的代码行数。

$('.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();

可以缩短为：

$('.billpay-internet-add-ons div').hide();

这使用父元素对要隐藏的元素进行分组，而不是对每个元素重复请求。

同样，您可以使用命名约定将项目映射到要显示和隐藏的元素 - 这是完整的工作示例：

$(document).ready(function(){
    $('.billpay-internet-add-ons div').hide();

    $('form#group').click(function(){
        $('#group input').each(function() {
            var item = $(this);
            var isChecked = item.is(':checked');
            var name = item.attr('class').replace("-btn", "-desktop");

            if (isChecked) {
                $('.' + name).show();
            } else {
                $('.' + name).hide();
            }
        });
    });
});

此示例纯粹基于您的 HTML，没有任何更改。看到它在这里工作。

如果您不需要转换名称，则可以进一步简化。您可以使用数据属性而不是更改类名来执行此操作。

score 0 · Accepted Answer

var $billpay= $('.billpay-internet-add-ons');
$billpay.find("div").hide();
$("#group input:radio").click(function(){
  $billpay.find("div").hide();
  $billpay.find("div:eq("+$(this).parent().index()+")").show();    
});

http://jsfiddle.net/KaF77/2/

score 0 · Accepted Answer

我把它简化了四个你。基本上，您查看收音机单击的索引，然后显示具有相同索引的 div。所以 div 的位置必须与收音机相匹配。

你的 HTML 和以前一样。

你的 CSS：

.billpay-internet-add-ons > div {
    display:none;
}

你所有的Javascript：

$(document).ready(function(){
    $('form#group').click(function(e)
    {
        $('.billpay-internet-add-ons > div').hide();
        $('form#group input[type="radio"]').each(function(index)
        {
            if($(this).is(':checked'))
            {
                $('.billpay-internet-add-ons > div:eq(' + index + ')').show();
            }
        });
    });
});

jsFiddle 演示：http: //jsfiddle.net/cfSXY/

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

7 回答 7

这是一个小提琴

Related

Reference