Hide all div's except one

问题

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

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.

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

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();
        });

    });

回答1:

Change

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

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

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();
});

回答2:

Add the element you want to hide to your selector, in this case the "div" elements inside the "wrapper" element. Also, fixed some of the other formatting of the selectors.

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

来源：https://stackoverflow.com/questions/13239331/hide-all-divs-except-one

标签

jquery

html

show-hide