jQuery -更改一个类中除'this‘之外的所有div的css

Question

我需要它，所以当我单击类'mydiv‘的div时，该类的所有div的z-index都为1，除了我单击的div的z-index为2。

再次单击div需要将其z索引改回1。

到目前为止，我想出了以下几点：

    $('.mydiv').toggle(function() {
        $('.mydiv').css('z-index','1');
        $(this).css('z-index','2');
    }, function() {
        $(this).css('z-index','1');
    });

如果您单击一个div，然后再次单击它(将z索引返回到1)，然后再单击另一个div，它就可以正常工作。

但是，如果您单击一个div，然后在没有单击第一个div的情况下单击另一个div(将其切换回z-index 1)，有时它可以工作，有时它什么也不做。我假设问题出在我代码的第一部分，因为这是：

$('.mydiv').css('z-index','1');

并不总是在此之前运行：

$(this).css('z-index','2');

这就是问题所在吗?如果是的话，我该如何解决这个问题？谢谢

更新-很抱歉一开始没有想到这一点，但我在这里简化了我的问题，实际的页面将需要有css定位动画。因此，当您单击div时，它会以平滑的动画方式移动。我想这意味着我不能仅仅通过切换一个类来改变css。谢谢

-

更新2-我认为我已经可以正常工作了，然后我在IE8和7上测试了一下。IE9没问题(和我测试过的所有其他浏览器一样)，但是IE7和IE8会让所有的图片在你点击其中任何一个的时候跳来跳去。以下是演示(所有css和jQuery都在页面中)：

http://smartpeopletalkfast.co.uk/jquery/basicDemo12-bugfix-3.htm

下面是jQuery：

    $(".image-div").click(function () {


        var divRefTwo = $(".image-div").not(this);
        $(".image-div").not(this).animate({
                width: '250px',
                left: '0px',
                marginRight: '0px',
                backgroundPosition: '-125px'
            }, 400, function() {
                $(divRefTwo).css('z-index','1');
            });

        if ($(this).css('z-index') == 1) {
            $(this).css('z-index','2');
            $(this).animate({
                width: '500px',
                left: '-125px',
                marginRight: '-250px',
                backgroundPosition: '0px'
            }, 500, function() {
                //
            });
        }
        else {
            var divRef = this;
            $(this).animate({
                width: '250px',
                left: '0px',
                marginRight: '0px',
                backgroundPosition: '-125px'
            }, 500, function() {
                $(divRef).css('z-index','1');
            });
        }

    });

我想是这样的: div.image-div的背景图像位置从-125px开始。当您单击div.image-div时，jQuery会将同一类的所有其他div的背景位置动画化为-125px。只有展开的div才应该更改，因为其他div的背景位置已经是-125px。

由于某些原因，IE将背景位置重置为0，然后将动画设置为-125px。因此动画结束在正确的位置，但动画得到他们的时候，它不应该。

你知道为什么会发生这种情况吗？这是jQuery IE的bug，还是选择器的层次化？谢谢

Answer 1

所以现在我们再一次改变了一切。基于OP编辑，现在的代码将是：

$(".mydiv").click(function () {
    var $t = $(this);
    $t.siblings().css("z-index", 1).animate({
            "margin-top": 0
        }, "fast");
    if ($t.css("z-index") == 1)
        $t.css("z-index", 2).animate({
            "margin-top": -10
        });
    else
        $t.css("z-index", 1).animate({
            "margin-top": 0
        }, "fast");
});

这是again updated working sample。

现在让我解释一下代码的逻辑。

// Since we'll use $(this) (the clicked div) in many places
// of the code, I started caching it in a var named $t.
var $t = $(this);

// Then I get all the siblings (The other divs that are beside this,
// or are children of the same parent). The I change back all this divs to
// z-index = 1 and animate their top down to 0.
$t.siblings().css("z-index", 1).animate({ "margin-top": 0 }, "fast");

// Next we have the if statement to check if the clicked div is with
// z-index = 1 (unclicked) or z-index = 2 (already clicked).
if ($t.css("z-index") == 1)

// Then we change the current div to z-index = 2 and animate it 10px upper.
$t.css("z-index", 2).animate({ "margin-top": -10 });

// Or else we change back the current div to z-index = 1 and animate it down.
$t.css("z-index", 1).animate({ "margin-top": 0 });

Answer 2

我认为这是切换部分造成了额外的混乱。你可以像这样完全避免它：

$('.mydiv').click(function() {
    var current = $(this).css('z-index');
    $('.mydiv').css('z-index','1');
    $(this).css('z-index', (current == '1' ? '2' : '1'));
});

Answer 3

下面是jQuery API中对.toggle()的描述

将两个或多个处理程序绑定到匹配的元素，以便在交替单击时执行。

这意味着第一个函数将在元素被单击时执行，第二个函数将在元素被单击时执行。这并不是你想要的行为。

你可以这样做：

$('.mydiv').click(function() {
    if ($(this).css('z-index') == 2) 
        $(this).css('z-index', 1);
    else {        
        $('.mydiv').css('z-index', 1);
        $(this).css('z-index', 2);
    }
});