jquery - 单击 div 以显示和隐藏 jquery 中的其他 div

Question

html代码：

<div id="all"> </div>
<div id="div1"> </div>
<div id="div2"> </div>
<div id="div3"> </div>
<div id="div4"> </div>
<div id="div5"> </div>

jQuery代码：

这适用于“div1”和“all”之间的切换。如果我想单击#div1 并仅显示“全部”并隐藏其他，当单击“全部”时，显示所有 div。

    $(function () {
         $("#div1, #all").on('click', function () 
         {
             $("#div1, #all").not(this).show();
             $(this).hide(); 
         });
     });

Answer 1

这是你需要做的，使用 jQuery 提供的可爱的选择器

$(function () {
    $('div[id^="div"]').click(function() {
        $(this).siblings().filter(':not(#all)').hide();
    });

    $('#all').click(function() {
        $('div[id^="div"]').show();
    });
});

Answer 2

尝试使用以下方法class。

HTML：

<div id="all"> </div>
<div class="myDivs"> </div>
<div class="myDivs"> </div>
<div class="myDivs"> </div>
<div class="myDivs"> </div>
<div class="myDivs"> </div>

JS：

$(function () {
    $('.myDivs').click (function () {
        $('.myDivs').not(this).hide();
    });

    $('#all').click (function () {
        $('.myDivs').show();
    });
});

编辑：即兴使用 2 个处理程序

演示：http: //jsfiddle.net/Fsg9y/2/

Answer 3

您可以通过 foreach 函数并提供父节点的 ID 来执行此操作：

$('div').each( function() {} );

Answer 4

您可以使用以下内容：

http://jsfiddle.net/sAW36/

(function($) {
    $('div[id^=div]').click(function(){
        var id = $(this).attr('id');
        $.each($('div[id^=div]'), function() {
            if ($(this).attr('id') == id) return true;
            $(this).hide();
        });
    });

    $('div#all').click(function() {
        $('div[id^=div]').show();
    });
})(jQuery);​

Answer 5

我假设您的 div 实际上不会被命名为“div1”、div2 等。在这种情况下，您可以这样做：

$(function(){
    $("div").click(function(){
        if ($(this).attr("id") === "all"){
            $(this).siblings().show();
        }
        else{
           $(this).siblings().not("#all").hide();
        }
    });       
});​

http://jsfiddle.net/mPdCb/1