Question

我正在尝试使用单选按钮来显示和隐藏div，但无法让下面的内容工作，任何帮助都会很棒？

    $('input:radio[name="option"]').click(function() {
    if ( $(this).val() == "pop" ) {
        $(this).parent().next('.wrapper').show();
    } else {
        $(this).parent().next('.wrapper').hide();
    }
});

<input name="option" type="radio">
<input name="option" type="radio" value="pop">

<div class="wrapper">text</div>

Answer 1

删除parent()，因为.wrapper元素与输入处于同一级别。

您还需要nextAll，而不是next，因为next仅选择紧随其后的嘶嘶声。

工作代码：

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

Demonstration

如果您只想要第一个.wrapper元素，那么您可以使用：

$('input:radio[name="option"]').click(function() {
    var $this = $(this), $wrapper = $this.nextAll('.wrapper').eq(0);
    if ( $this.val() == "pop" ) {
        $wrapper.show();
    } else {
        $wrapper.hide();
    }
});

Answer 2

你的.parent().next('wrapper').无法抓住（没有这样的元素）。

这将有效

$('.wrapper').show();

Answer 3

试试这个：

$(document).ready(function(){  
    $("input[value='pop']").on("click", function() {
        $(".wrapper").toggle();
    });
});

jQuery单选按钮显示/隐藏

3 个答案: