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但是它被使用： - ）

你也可以通过“使用travsering函数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（“.strip-thumb”，context）选择器的上下文。上下文是DOM的一部分，您可以确定唯一具有“slider-thumb”类的图像是您的目标。

Jquery将一个源图像应用于另一个源图像

2 个答案: