1

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

5 に答える 5

4

jQueryが提供する素敵なセレクターを使用して、あなたがする必要があることは次のとおりです

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

    $('#all').click(function() {
        $('div[id^="div"]').show();
    });
});
于 2012-09-28T15:21:26.020 に答える
3

を使用して以下のアプローチを試してください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/

于 2012-09-28T15:23:51.890 に答える
0

あなたの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

于 2012-09-28T15:29:31.283 に答える
0

次のようなものを使用できます。

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);​
于 2012-09-28T15:26:06.727 に答える
0

foreach 関数を介してこれを行うことができ、親ノードの ID を提供します。

$('div').each( function() {} );
于 2012-09-28T15:18:43.763 に答える