jQuery - 更改一個類的所有div除了'this'以外的css

Question

我需要它，所以當我點擊類'mydiv'的div時，該類的所有div都有一個z-index爲1，除了div我點擊了其中的一次點擊的div 2.

的z-index需要時更改回其z指數爲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，然後單擊另一個，而不點擊第一個（將其切換回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"); 
}); 

這裏是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

這裏是.toggle()從jQuery API的描述：要在備用點擊執行

綁定兩個或更多個處理程序來匹配的元素。

這意味着該第一功能將執行每甚至時間被點擊的元件和所述第二功能將執行每奇數時間被點擊的元素。這不是你想要的行爲。

你可以這樣做，而不是：

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