jquery - 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对应于 a.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，但它已被使用:-)

您也可以尝试通过“使用遍历函数http://api.jquery.com/category/traversing/在 DOM 中行走来找到拇指，它可能会做出类似的事情：

 $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 的一部分，您可以确定唯一具有“slider-thumb”类的图像是您的目标。