Jquery 所有其他的（不是这个）

我在同一页上重复了不同的div。以下是简化的示例：

我想做的是：
-单击一个绿色，只单击他的红色淡出
-另一个红色的fadeIn
-当我点击其他任何地方，比如背景，所有的红色都会消失

我已经试了一个小时，但我没有同时找到这三样东西

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

---

您必须使用类选择器并执行以下操作

//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");
});

要同时实现其他行为，请添加

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

---

在这里拉小提琴

首先，您应该将id选择器更改为class one:

$（“#绿色”）

至

$（“.green”）

另一件需要记住的事情是，这两个表达式（

$（this）.sibbines（）

和

$（this）.parent（）.children（）

）的含义相同，这意味着您的代码可以翻译为：

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

---

我刚刚更新了你的小提琴，这应该可以做到：

$(function(){

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

})​

---

这应该能解决所有问题

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

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

---

演示在

你的小提琴有一个错误，它应该是$（'.green'）。点击而不是#greenbruv你得到了类绿色：）你使用#green作为id使用$（'.green）和voilla=祝你玩得愉快，干杯！是的，小提琴有个错误，我已经更新过了。谢谢（但这不是重要的问题，其余的问题都是一样的）我尝试了这个，但没有解决我所问的问题。也许有什么我不明白的？-是的，是真的，在我的第一个版本中，有一个错误，把#绿色，它应该是绿色的。谢谢-另一部分不能解决我的问题。我试着做3件不同的事情。也许我没有解释清楚：1-点击一个绿色，只有他的红色淡出2-另一个红色淡出3-当我点击其他任何地方，如背景，所有的红色淡出这个解决方案是伟大的。非常清楚和简单。这对我很有帮助，因为现在我明白了我的代码出了什么问题。非常感谢你！您的代码在fiddle中运行良好，但当我将其放在普通html中复制粘贴来研究它时，第一部分运行良好，但单击$（窗口）时的部分不工作。我不知道为什么？@Narcís，真奇怪！在任何情况下，如果可行，请使用Gaby编写的代码，这也很好！：）你的代码工作得很完美。非常感谢。我不明白“点击任何地方”是怎么工作的。您能解释一下吗？我为所有文档元素绑定了click事件，并使用

e.target

测试了clicked元素，请注意

e.target

返回单击的dom元素，而

$（e.target）

返回此元素的jQuery对象。1。如果我理解这一部分的意思：如果没有点击的话，那么类是绿色的，红色的。对吗。e、 此处的目标与“this”（在本例中不是this或！this）具有相同的功能。是否相同？@Narcis，如果单击的元素没有绿色类（换句话说，除了绿色类以外的所有元素），则此条件返回true。例如，target指的是单击的元素，但这指的是文档元素，因此不相同

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

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

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