3

我想隐藏一个完整的 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();
        });

    });
4

2 回答 2

13

改变

$('#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();
});
于 2012-11-05T19:54:10.397 回答
2

将要隐藏的元素添加到选择器中，在本例中是“包装器”元素内的“div”元素。此外，修复了选择器的一些其他格式。

    $('#wrapper div').not("#box_5").hide();
    $("#button_1").click(function() {
        $('#wrapper div').show();
    });
    $("#button_2").click(function() {
        $('#wrapper div').not("#box_5").hide();
    });
于 2012-11-05T20:09:09.377 回答