Question

$('input[type="radio"]').change(function(){
    if ($('#subscribe').is(':checked')){
         $("#subNow").show();
         $('#oneTime').hide();
    }
    if ($('#one-time').is(':checked')){
       $('#oneTime').show();
       $("#subNow").hide();
    }   
});

上面的代码是在点击2个单选按钮时显示和隐藏2个div。我是jquery的新手，所以想知道是否有更好的方法来编写相同的功能。

Answer 1

如果您设置了初始状态，请说#subNow { display: none; }，那么只需使用.toggle()方法，没有条件检查那么多......

$('input[type="radio"]').change(function(){
  $("#subNow").toggle();
  $('#oneTime').toggle();
});

#subNow {
  display: none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type='radio' name='rd' checked />1
<input type='radio' name='rd' />2
<br />
<div id="subNow">subNow</div>
<div id="oneTime">oneTime</div>

同时

如果它们可能跟在标记上，为什么不放弃JS并且只去CSS？

input[type="radio"]:nth-child(2):checked ~ #oneTime, #subNow { display: none; } input[type="radio"]:nth-child(2):checked ~ #subNow{ display: block; }

<input type='radio' name='rd' checked />1 <input type='radio' name='rd' />2 <br /> <div id="subNow">subNow</div> <div id="oneTime">oneTime</div>

Answer 2

这正是我这样做的方式。唯一的另一种选择是获得单选按钮的值，但你基本上做的就是你已经做过的事情。

Answer 3

一种方法是使用公共类和数据属性

    $(".rads").on("change", '[type="radio"]', function (e) {
        var show = $(this).data("show");
        $(".details").hide().filter(show).show();
    });

.details {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="rads">
        <input type="radio" id="x" name="rad" data-show=".foo" />
        <label for="x">A</label>
        <input type="radio" id="y" name="rad" data-show=".bar" />
        <label for="y">B</label>
    </div>
    <div class="foo details">Apple</div>
    <div class="bar details">Bacon</div>

还有使用：checked选择器的纯CSS解决方案。

Answer 4

如果您没有其他任何州需要担心，可以减少第二个if并放置else

$('input[type="radio"]').change(function(){
    if ($('#subscribe').is(':checked')){
         $("#subNow").show();
         $('#oneTime').hide();
    }
    else{
       $('#oneTime').show();
       $("#subNow").hide();
    }   
});

您也可以使用switch

需要帮助来优化单选按钮的代码

4 个答案: