jQuery单选按钮显示/隐藏

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

示范

如果只需要后面的第一个.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();
    });
});