Jquery для изменения z-index для определенного эскиза

Question

Я пробовал это другим способом некоторое время назад безрезультатно.Я пытаюсь изменить изображение миниатюры при нажатии.сейчас у меня есть код наведения, который затухает один div над другим, когда moused над.Я попытался добавить функцию .click к этому коду, но это сделало все это странным.Ооо, я получаю где-то с этим

$(document).ready(function () {
    $("#Thumb1").click(function () {
        $("#hidden").hide().html('<iframe src="http://player.vimeo.com/video/38581363?byline=0&amp;portrait=0&amp;autoplay=1" width="508" height="286" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>').fadeIn(4e3);
        $("#leftsidePlayer").text("This is some text on the consulting video!")
        $("img.b").css({zIndex: 11});
    });

, который является кодом для одной миниатюры.Есть 4. Это работает, но он контролирует все миниатюры в div упаковки.Как я могу сделать так, чтобы это работало только на тот, на который я нажимаю?

это CSS, который у меня есть

div.fadehover {
position:relative;
}

img.a {
position:absolute;
left:0;
top:0;
z-index:10;
}

img.b {
position:absolute;
left:0;
top:0;
z-index:5;
}

Я знаю, что это скорее всего связано с(это), но я все еще учусь.

любая помощь высоко ценится Спасибо

Answer 1

Можем ли мы увидеть вашу разметку? Я бы не стал делать z-index для этого. Можно также просто fadeIn () и hide ():

Разметка -

<div class='thumb'>
  <img src=''/>
  <img src='' style='display:none;'/>
</div>

jQuery -

$(".thumb").click(function ( e ) {
  var children = $( this ).children();
  var first-thumb = th.slice(0,1);
  var second-thumb = th.slice(1,2);

  if( first-thumb.is( ':visible' ) )
  {
    first-thumb.hide().next().fadeIn();
  }
  else
  {
    second-thumb.hide().prev().fadeIn();
  }    
});

Answer 2

Заменить строку $("img.b").css({zIndex: 11}); следующим.

$(this).css({zIndex: 11});

Таким образом, вы будете изменять z-индекс только для элемента, на который щелкнули.