jQuery - Cambiar css para todos los divs de una clase excepto 'esto'

Question

Lo necesito así que cuando hago clic en un div de la clase 'mydiv', todos los divs de esa clase tienen un índice z de 1, excepto el div he hecho clic en el que como un índice z de 2.

al hacer clic en el div de nuevo tiene que cambiar su índice z de nuevo a 1.

hasta ahora he llegado con lo siguiente:

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

Si hace clic en un div y luego vuelve a hacer clic en él (devolviendo el índice z a 1) antes de hacer clic en otro, funciona bien.

Sin embargo, si hace clic en un div y luego hace clic en otro sin hacer clic en el primero (para alternarlo a z-index 1), a veces funciona y otras veces no funciona. Im suponiendo que el problema está en la primera parte de mi código, porque esto:

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

no siempre se ejecuta antes de esto:

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

es que el problema y si es así, ¿cómo puedo solucionar este problema? Gracias

ACTUALIZACIÓN - Disculpa por no pensar en esto inicialmente, pero he simplificado mi pregunta aquí, la página real tendrá que tener animaciones de posicionamiento css. Entonces, cuando haces clic en un div, se mueve con una animación suave. Creo que eso significa que no puedo cambiar el CSS pasando una clase. Gracias

-

Actualización 2 - pensé que tenía este trabajo, y luego probado en IE8 e IE9 7. está bien (junto con cualquier otro navegador que probé con) pero IE7 e IE8 hacer que todos las imágenes saltan cuando haces clic en cualquiera de ellas. Aquí está la demostración (todo el css y jQuery están dentro de la página):

http://smartpeopletalkfast.co.uk/jquery/basicDemo12-bugfix-3.htm

Y aquí está el 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'); 
      }); 
     } 

    }); 

pienso qué está sucediendo es la siguiente: La posición de la imagen de fondo para div .image-div comienza a -125px. Cuando haces clic en div.image-div, jQuery anima la posición de fondo para todos los otros divs de la misma clase a -125px. Solo los divs que se expanden deben cambiar, ya que los otros divs ya tienen una posición de fondo de -125px.

Por alguna razón, IE restablece la posición de fondo a 0, y luego la anima a -125px. Entonces, la animación termina en el lugar correcto, pero se anima para obtener su cuando no debería.

¿Alguna idea de por qué sucede esto? ¿Es esto un error de IE de jQuery o una jerarquía de CSS de selectores? Gracias

Answer 1

Así que ahora cambió todo de nuevo.Con base en el OP edición, ahora el código sería:

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

Aquí es el again updated working sample.

Ahora déjame explicarte la lógica del código.

// 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

Creo que es la parte de alternar que causa confusión adicional aquí. Esto se puede evitar por completo la siguiente manera:

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

Answer 3

Aquí está la descripción de .toggle() de la jQuery API:

unirse a dos o más manipuladores a los elementos emparejados, para ser ejecutado en los clics alternos.

Esto significa que la primera función se ejecutará cada vez que incluso se hace clic en el elemento y la segunda función se ejecutará cada vez que extraña se hace clic en el elemento. Este no es realmente el comportamiento que deseas.

Usted puede hacer esto en su lugar:

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