Jquery wendet ein Quellbild auf ein anderes an

Question

Ich habe ein größeres Schiebereglerbild und ein kleineres "Miniaturbild". Ich habe diesen Code so weit:

$j(".slider-img").each(function(){ 
    var slideSource = $j(this).attr("src"); 
    $j(".slider-thumb").each(function() { 
    $j(this).attr("src", slideSource); 
    }); 
}); 

Aber es gibt mir das Bild von der ersten Folie für alle Thumbnails. Also möchte ich die Quelle von jedem .slider-img nehmen und auf jeden .slider-thumb anwenden. Ideen?

Answer 1

die .slider-img Vorausgesetzt, die zu einem .slider-thumb entspricht, ist in der gleichen Position in dem Dokument, relativ zu den anderen mit dieser Klasse, können Sie diese verwenden:

var thumbs = $j('.slider-thumb'); 
$j('.slider-img').each(function(i) { // i is the position in the set 
    thumbs.eq(i).attr('src', this.src); // set the src attribute of the element with position i in the thumbs set to the src of this element 
}); 

Answer 2

Sie benötigen einen Weg, um die entsprechenden Daumen zu finden wenn du in deinem Bild bist. Es kann ein "rel" -Attribut auf Ihrem Elternbild sein (oder auf dem Daumen), es ist nicht sehr offiziell-w3c-clean, aber es wird verwendet :-)

Sie können auch versuchen, den Daumen zu finden, indem Sie "gehen im DOM mit den travsering Funktionen http://api.jquery.com/category/traversing/ könnte es so etwas machen.

$j(".slider-img").each(function(){ 
    var slideSource = $j(this).attr("src"); 
    var thethumb = $j(".slider-thumb", 
    $j(this).parent('div') 
    .next() 
    .child('table:first') 
    .next() 
    ); 
    thethumb.attr("src", slideSource); 
}); 

Hier verwende ich einen Zusammenhang mit dem $ j („Slider-Daumen“, Kontext) Selektor der Kontext ist ein Teil der DOM wo du sicher bist das einzige Bild mit Klasse "slider-thumb" ist dein Ziel.