jquery - 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

尝试这个：

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

Answer 3

你.parent().next('wrapper').没有什么可以抓住的（没有这样的元素）。

这将起作用

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