Question

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

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

我一直在努力，我没有同时找到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选择器更改为第一类：
$("#green")至$(".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();
                }
            });

所有其他人（不是这个）

5 个答案: