jquery - 他のすべて（これではない）

Question

同じページで異なる div が繰り返されています。これは単純化された例です: http://jsfiddle.net/8gPCE/16/

私がやろうとしていること
は
:

私は何時間も試してみましたが、同時に3つのことを見つけることはできません.

このようなものは機能しません（そして、私は最初の2つのことを試します）：

$(function(){

    $(".green").click(function() {
        $(this).siblings(".red").fadeOut("slow");
        $(this).parent().not(this).children(".red").fadeIn("slow");
    });

})

score 1 · Accepted Answer

クラスセレクターを使用して、次のようなことをする必要があります

//when you click on an element with class green
$(".green").click(function() {
    //select his red sibling
    var sib =  $(this).siblings(".red");
    //fade it out
    sib.fadeOut("slow");
    //select all red elements that are not the red sibling and fade them in
    $(".red").not(sib).fadeIn("slow");
});

http://jsfiddle.net/8gPCE/2/

他の動作も実装するには、追加します

$(window).on("click", function(e){
    if(!$(e.target).hasClass('green')){
        $(".red").fadeIn("slow");
    }
});

ここでフィドルhttp://jsfiddle.net/8gPCE/7/

score 1 · Accepted Answer

これはすべての問題を処理する必要があります

$(".green").click(function(e) {
    e.stopPropagation();
    $(this).siblings(".red").fadeOut("slow");
    $('.green').not(this).siblings(".red").fadeIn("slow");
});

$(document).click(function() {
   $('.red').fadeIn();
});

http://jsfiddle.net/8gPCE/11/のデモ

score 0 · Accepted Answer

      $(".green").click(function() {
            //Show all red
            $('.red').fadeIn();
            //fade only this
            $(this).siblings(".red").fadeOut("slow");
            });

// click anywhere
        $(document).bind('click', function(e) {
                var $clicked = $(e.target);
                if (! $clicked.hasClass("green"))
                { 
                   $('.red').fadeIn();
                }
            });

score 0 · Accepted Answer

あなたのフィドルを更新したところです。これでうまくいくはずです：

$(function(){

    $(".green").click(function() {
        $(this).siblings(".red").fadeOut("slow");
        $(this).parents('.photo').siblings().children(".red").fadeIn("slow");
    });

})

score 0 · Accepted Answer

まず、id セレクターをクラス one :
$("#green")toに変更する必要があります$(".green")。
心に留めておくべきもう 1 つのことは、これら 2 つの式 ($(this).siblings()と$(this).parent().children()) は同じことを意味するということです。つまり、コードは次のように変換できます。

 $(".green").click(function() {
    $(this).siblings(".red").fadeOut("slow").fadeIn("slow");
});

jquery - 他のすべて（これではない）

5 に答える 5

Related

Reference