JQuery 隐藏除当前元素之外的所有元素

JQuery hides all element besides current element

本文关键字：元素 JQuery 隐藏      更新时间：2023-09-26

我有 4 个块，每当我按下其中一个块时，里面就会出现一个复选框。如果我单击另一个块，当前复选框将消失，另一个复选框将出现，这很好。问题是，如果我单击一个块并出现复选框，当我按下该复选框时，该块将消失，而不应该消失。

我有以下 html 代码：

<div class="item">1 <input class="hidden" type="checkbox"></div>
<div class="item">2 <input class="hidden" type="checkbox"></div>
<div class="item">3 <input class="hidden" type="checkbox"></div>
<div class="item">4 <input class="hidden" type="checkbox"></div>

以下 CSS 代码：

.hidden {
    display: none;
}

和JavaScript代码：

$(".item").click(function(){     
    $(".item").find('input').hide();                    
    $(this).find('input').show('fast');
});

为了隐藏除当前复选框（我单击的块）之外可见的所有复选框，我该怎么办？

像这样使用.not()过滤器

$(".item").click(function(){     
    $(".item").not(this).find('input').hide();                    
});

编辑：

您可能需要考虑用户是否想要改变主意，并重新启用所有选项。您可以像这样执行此操作：

$(".item").click(function(){     
    var items = $(".item").not(this).find('input');
    if($('input',this).is(':checked')) items.hide();
    else items.show();                
});

http://jsfiddle.net/r8yBd/

尝试

$(".item").click(function(){     
    $(".item").find('input').addClass('hidden');                    
    $(this).find('input').removeClass('hidden');
});
相关文章：