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并仅显示“all”并隐藏其他内容，当点击“all”时，显示所有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个处理程序进行即兴创作

DEMO： 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实际上被命名为＆＃34; div1＆＃34;，div2等。在这种情况下，你可以这样做：

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

http://jsfiddle.net/mPdCb/1

单击一个div来显示和隐藏jquery中的其他div

5 个答案: