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>

JS：

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

JSFiddle sample

谢谢！

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

在我的版本中，扩展版本，你也有在pageload上运行的切换功能，它在简化版本中没有！您可能需要考虑显示的第二个选项。

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

隐藏一个Jquery不工作的div

2 个答案: