jQuery - 更改除了'this'之外的所有div的css

Question

我需要它,所以当我点击类'mydiv'的div时,该类的所有div都有一个z-index为1,除了我点击的div作为z-index为2.

再次单击div需要将其z-index更改回1.

到目前为止,我想出了以下内容:

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

如果你点击一个div然后再次点击它(将z-index返回到1),然后点击另一个它就可以了.

但是,如果单击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错误或者选择器的CSS层次结构吗？谢谢

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

这是再次更新的工作示例。

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

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