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