Jquery更改特定缩略图的z-index答案

【问题标题】：Jquery to Change z-index of a specific thumbnailJquery更改特定缩略图的z-index
【发布时间】：2012-04-12 10:22:50
【问题描述】：

我不久前尝试了另一种方法，但无济于事。我正在尝试在单击时更改缩略图的 img。现在我有一个悬停代码，当鼠标悬停在另一个 div 上时，它会淡出另一个 div。我尝试将 .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;
}

我知道这很可能与使用（this）有关，但我仍在学习。

非常感谢任何帮助谢谢

【问题讨论】：

标签： jquery css z-index thumbnails

【解决方案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();
  }    
});

【讨论】：

【解决方案2】：

将$("img.b").css({zIndex: 11}); 行替换为以下内容。

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

这样您将仅更改您单击的元素的 z-index。

【讨论】：

嗯，你没有提供完整的代码，是吗？我的意思是用我写的替换行$("img.b").css({zIndex: 11});。这样，您将仅更改您单击的元素的 z-index。