jquery - 所有其他（不是这个）

Question

我在同一页面中重复了不同的 div。这是简化的示例：http: //jsfiddle.net/8gPCE/16/

我尝试做的是：
- 点击一个绿色，只有他的红色淡出
- 另一个红色淡入
- 当我点击到其他任何地方，如背景时，所有红色淡入

我一直在尝试一个小时，但我没有同时找到这 3 件事。

像这样的东西不起作用。（我只尝试前两件事）：

$(function(){

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

})

Answer 1

您必须使用类选择器并执行类似的操作

//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/

Answer 2

这应该处理所有问题

$(".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/

Answer 3

首先，您应该将 id 选择器更改为 class one :
$("#green")to $(".green")。
要记住的另一件事是，这两个表达式 ($(this).siblings()和$(this).parent().children()) 表示相同的意思，这意味着您的代码可以翻译为：

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

Answer 4

我刚刚更新了你的小提琴，这应该可以解决问题：

$(function(){

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

})​

Answer 5

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