jQuery - 为 class 的所有 div 更改 css，“this”除外

Question

我需要它，所以当我单击 class 'mydiv' 的 div 时，该 class 的所有 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，然后在单击另一个 div 之前再次单击它（将 z-index 恢复为 1），它可以正常工作。

但是，如果您单击一个 div，然后单击另一个而不单击第一个（将其切换回 z-index 1），有时它会起作用，有时它不会做任何事情。 我假设问题出在我的代码的第一部分，因为：

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

在此之前并不总是运行：

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

这是问题吗？如果是，我该如何解决？ 谢谢

更新 - 很抱歉最初没有想到这一点，但我在这里简化了我的问题，实际页面需要有 css 定位动画。 因此，当您单击一个 div 时，它会以平滑的 animation 移动。 我认为这意味着我不能通过切换 class 来更改 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 的背景图像 position 从-125px 开始。 当您单击 div.image-div 时，jQuery 将同一 class 的所有其他 div 的背景 position 设置为 -125px。 只有扩展的 div 应该更改，因为其他 div 已经具有 -125px 的背景 position。

由于某种原因，IE 将背景 position 重置为 0，然后将动画设置为 -125px。 所以 animation 最终会出现在正确的位置，但会在不应该出现的时候进行动画处理。

任何想法为什么会发生这种情况？ 这是 jQuery IE 错误还是选择器的 CSS 层次结构？ 谢谢

Answer 1

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

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

Answer 2

所以现在我们再次改变了一切。 基于 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 });

Answer 3

这是 jQuery API中对.toggle()的描述：

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

这意味着第一个 function 将在每次单击元素时执行，第二个 function 将在每个奇数次单击元素时执行。 这不是您真正想要的行为。

你可以这样做：

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