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