用Jquery隐藏不工作的div

Question

我正试图根据另一个无线电组的选择来隐藏一个div。只有当第一组单选按钮的值等于3时，才会显示底部集。我就是没法让它起作用。我在这里做错什么了？

HTML：

<label>
  <input name="Weekend" type="radio" id="Weekend_0"  class="Weekend" value="1"  checked="checked" />
  Saturday</label>
<br />
<label>
  <input type="radio" name="Weekend" value="2" class="Weekend" id="Weekend_1" />
  Sunday</label>
<br />
<label>
  <input name="Weekend" type="radio" id="Weekend_2" class="Weekend" value="3" />
  No</label>

<br />

<div class="wrapper">

  <label>
    <input name="AMPM" type="radio" id="AMPM_0" value="1" checked="checked" />
    AM</label>
  <br />
  <label>
    <input type="radio" name="AMPM" value="2" id="AMPM_1" />
    PM</label>
  <br />

</div>

联署材料：

$('input:radio[name="Weekend"]').click(function() {
    var $this = $(this);
    if ( $this.val() == 3 ) {
        $this.nextAll('.wrapper').show();
    } else {
        $this.nextAll('.wrapper').hide();
    }
});

JSFiddle样品

谢谢!

Answer 1

简化JS: http://jsfiddle.net/digitalextremist/AwYjY/92/

$('input:radio[name="Weekend"]').click(function() {
    if ( $(this).val() == "3" ) { //de #1
        $('.wrapper').show();     //de #2
    } else {
        $('.wrapper').hide();     //de #2
    }
});

备注：

• 对于#1:您需要使用文本值，而不是整数值。
• 对于#2:您可以直接引用.wrapper，正如您的代码一样。

扩展JS: http://jsfiddle.net/digitalextremist/AwYjY/91/

$(document).ready(function () {
    $('input:radio[name="Weekend"]').click(function () {
        toggleAMPM($(this).val())
    });
    $('input:radio[name="Weekend"]').each(function (i, e) {
        if ( $(e).is(':checked') ) toggleAMPM( $(e).val() )
    });
});

function toggleAMPM(field) {
    if (field == "3") {
        $('.wrapper').show();
    } else {
        $('.wrapper').hide();
    }
}

在我的扩展版本中，您还具有在页面负载上运行的切换功能，在简化的版本中它不这样做！您可能需要考虑显示的第二个选项。

Answer 2

.wrapper不是单选按钮的兄弟。试试这个：

$this.parent().nextAll('.wrapper').show();

或

$this.parent().siblings('.wrapper').show();

如果你想简化：

http://jsfiddle.net/ENv2y/

$('input:radio[name="Weekend"]').click(function () {
    var $this = $(this);
    $this.parent().siblings('.wrapper').toggle($this.val() == 3);
});