隐藏除一个之外的所有div [英] Hide all div's except one

问题描述

我想隐藏一个完整的div容器，除了一个div。

I'd like to hide a complete div container except one div.

因此，在启动时只显示div idbox_5并隐藏其余部分。
当我点击按钮1显示所有内容时，当我点击按钮2再次隐藏所有内容时。

So, on startup just show div id"box_5" and hide the rest. When i click button 1 show everything and when i click button 2 hide everything again.

问题是当我隐藏包装div时它隐藏了一切包括id = box_5。

The problem is when i hide the "wrapper" div it is hiding everything incl. id=box_5.

我认为问题是div在包装div内，但我不知道解决方法？

I think the problem is the div is within the wrapper div but i don't know a work-around?

<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。

Note: Removed the eq selector. eq selector works on the index and in your case you don't need eq selector as you know the ID of the div.

还请改变你的处理函数，如下所示，

Also please change your handler functions like below,

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

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

这篇关于隐藏除一个之外的所有div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！