隐藏除一个以外的所有div

2022-08-22 00:00:00 jquery html show-hide

我想隐藏除一个div之外的整个div容器。

因此,在启动时,只需显示div id";box_5";并隐藏其余部分。 当我单击按钮%1时显示所有内容,而当我单击按钮%2时再次隐藏所有内容。

问题是,当我隐藏";包装器";div时,它会隐藏所有内容,包括id=box_5。

我认为问题是div在包装div中,但我不知道解决方法?

<button id="button_1">show</botton>
<button id="button_2">hide</botton>

<div id="wrapper">
<div id="box_1"></div>
<div id="box_2"></div>
<div id="box_3"></div>
<div id="box_4"></div>
<div id="box_5">always show this</div>
<div id="box_6"></div>
<div id="box_7"></div>
<div id="box_8"></div>
<div id="box_9"></div>
<div id="box_10"></div>
</div>




$(document).ready(function() {
    $('#wrapper').not(":eq(#box_5)").hide();
    $('id="button_1"').click(function() {
        $('#wrapper').show();
        $('id="button_2"').click(function() {
            $('#wrapper').not(":eq(#box_5)").hide();
        });

    });

解决方案

更改

$('#wrapper').not(":eq(#box_5)").hide(); 

$('#wrapper').not("#box_5").hide();

注意:删除了eq选择器。eq选择器作用于索引,在您的情况下,您不需要eq选择器,因为您知道div的ID。

还请如下所示更改您的处理程序函数

$('#button_1').click(function() {
    $('#wrapper').show();
});

$('#button_2').click(function() {
    $('#wrapper').not("#box_5").hide();
});

相关文章