Jquery zu ändern Z-Index eines bestimmten Vorschaubilds

Question

Ich versuchte dies eine andere Möglichkeit vor einer Weile vergebens. Ich versuche, die Miniaturansicht zu ändern, wenn darauf geklickt wird. Im Moment habe ich einen Hover-Code, der beim Überstreichen ein div überblendet. Ich habe versucht, diesem Code eine .click-Funktion hinzuzufügen, aber das hat die ganze Sache verpfuscht. Sooo, ich komme irgendwo mit dieser

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

das ist der Code für ein Thumbnail. Es gibt 4. Es funktioniert, aber es steuert alle Miniaturansichten in der Verpackung div. Wie kann ich es so machen, dass es für den einen funktioniert, auf den ich klicke?

dies ist die CSS-I

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

habe ich weiß, dass es die meisten hat wahrscheinlich etwas mit der Verwendung von (this) zu tun, aber ich lerne immer noch.

jede Hilfe sehr geschätzt Dank

Answer 1

Ersetzen Sie die Zeile $("img.b").css({zIndex: 11}); mit dem, was folgt.

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

diese Weise können Sie den Z-Index nur auf Sie geklickt haben für das Element ändern werde.

Answer 2

Können wir Ihr Markup sehen? Ich würde dafür keinen Z-Index machen. Mai auch nur fadeIn() und hide():

Markup -

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