Jquery применить одно исходное изображение к другому

Question

У меня есть увеличенное изображение ползунка и уменьшенное изображение.Пока у меня есть этот код:

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

Но он дает мне изображение с первого слайда для всех миниатюр.Поэтому я хочу взять источник из каждого .slider-img и применить его к каждому .slider-thumb.Идеи?

Answer 1

Предполагая, что .slider-img, который соответствует .slider-thumb, находится в той же позиции в документе относительно других с этим классом, вы можете использовать это:

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

Вам нужен способ найти соответствующий большой палец, когда вы находитесь на вашем изображении.Это может быть атрибут "rel" на вашем родительском изображении (или на большом пальце), он не очень официально-w3c-clean, но он используется: -)

Вы также можете попытаться найти большой палец с помощью "ходить в DOM с функциями travsering http://api.jquery.com/category/traversing/ это может сделать что-то вроде этого:

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

Здесь я использую контекст для селектора $ j (". slider-thumb", context)Контекст является частью DOM, где вы уверены, что единственное изображение с классом «ползунок» является вашей целью.