Question

我有一个用jQuery Cycle构建的内容旋转器，我正在尝试添加jQuery Fancybox。

HTML：

<div class="secRotatorSlide">
    <a href="" class="iframe enlargePic">Enlarge</a>
    <img class="slideImg" src="secRotatorImg/slide1.png" alt="Slide 1" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

上面有多组HTML。所有都正确旋转。

jQuery的：

jQuery('.secRotatorSlide').find('.slideImg').each(function() {
    var iframeSrc = jQuery(this)[0].src;
    //alert(iframeSrc)
    jQuery('a.enlargePic').attr('href', iframeSrc);    
});

如果我注释掉设置href的行，并取消注释警告行，它将一个接一个地正确地警告每个src。如果我保持原样，它会从最后一组html中获取图像src，并将其应用于所有html集合中的所有href。

我做错了什么？我认为它是在jQuery的最后一行，但我不确定。我尝试在最后一行使用this，但这根本不做任何事情。

Answer 1

您的选择器jQuery('a.enlargePic')过于通用。这将找到DOM中的所有匹配元素，您将继续为其设置href值。您需要限制其范围。

尝试： jQuery(this).siblings('a.enlargePic').attr('href', iframeSrc);

这样，您只需为您正在处理的元素的同一父（兄弟）的子元素设置值。

http://api.jquery.com/siblings/

编辑：如果您的所有图片和主播共享同一个父级，请考虑$.prev()

Answer 2

jQuery(this).prev('a.enlargePic').attr('href', iframeSrc);

选择器a.enlargePic选择DOM中具有特定类的所有链接。使用.prev()

定位当前图片旁边的唯一内容

获取图像src然后将其作为href应用于.each循环中

2 个答案: