隐藏除一个外的所有div元素

Question

我希望隐藏整个div容器，除了一个div。 因此，在启动时只显示id为“box_5”的div，其余的都是隐藏的。 当我点击按钮1时，显示所有内容；当我点击按钮2时，再次隐藏所有内容。

问题在于，当我隐藏“wrapper” div时，它会隐藏包括id=box_5在内的所有内容。

我认为问题在于该div位于wrapper 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();
        });

    });

- Bastiaan

Answer 1

改变

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

到

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

注意：移除了eq选择器。 eq选择器根据索引工作，而在您的情况下，由于您知道div的ID，因此不需要eq选择器。

此外，请像以下代码一样更改处理函数：

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

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

- Selvakumar Arumugam

---

谢谢你的回答。结合Alex的答案，它几乎可以工作了。 - Bastiaan

Answer 2

将想要隐藏的元素添加到你的选择器中，例如这里是“wrapper”元素内部的“div”元素。同时，修正一些其他选择器的格式。

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

- Alex

---

非常感谢！我是新手，找不到问题所在。它正在工作，但现在它是否隐藏了盒子5内部的div？ - Bastiaan