Question

我有这个问题的复选框和显示divs onclick。

我的代码：

$('.check').change(function(){
if(this.checked)
$('.box').fadeIn('slow');

});

有没有办法显示不同的div而不在html上添加不同的类？也许有data-ref？ http://jsfiddle.net/wolfovs/jqksy648/

Answer 1

可能你需要这个

$('.check').change(function () {

    $(this).next('.box').slideToggle(this.checked);

});

<强> DEMO

Answer 2

您可以使用事件处理程序中的事实this引用调用当前正在执行的方法的DOM元素。

从那里你可以构造一个选择器，它引用要显示/隐藏的相应元素：

$(this).next('.box')

此处，$(this)是复选框，.next('.box')使用＆＃34; .box＆＃34;类引用直接兄弟姐妹。

然后，您可以调用其上的任何切换方法，传递其已检查状态（其计算结果为true或false），以便执行正确的操作。

$(this).next('.box').toggle(this.checked);

这是有效的，因为当使用布尔值调用.toggle()时，它指示是否显示或隐藏元素。

Answer 3

您也可以

jQuery(document).ready(function ($) {
    $('.check').each(function (i) {
        var $this = this;
        $(this).on("change", function () {
            $this.checked ? $(".box").eq(i).fadeIn("slow") : $(".box").eq(i).hide();
        });
    });
});

这样，框对next元素不是input并不重要，这对于布局来说非常方便。< / p>

参见 JSFIDDLE

如果选中复选框，则显示不同的div

3 个答案: