Question

我正在使用：

$(function image_swap() {
    $('.mainthumb').click(function () {
        $('.main').attr('src', this.src.replace('-thumb', ''))
    });
});

单击缩略图时，将主图像更改为其他图像。

但是，在一个页面上有多个这样的分组（I.E一个图像下面有两个较小的缩略图），因为它是页面下面列出的产品。

所以产品有：

带有一类主缩略图的主图像 mainthumb和另一个带有主拇指类的缩略图

产品二已经

带有一类主缩略图的主图像 mainthumb和另一个带有主拇指类的缩略图

等等。

因此，当我点击产品的缩略图时，所有主要图像都会更改为缩略图图片，因为它们都具有相同的类别 - 有没有办法解决这个问题，而不是每个产品都有不同的类别？

HTML：

      <li><strong>Complete with:</strong></li>

        <li>&bull; item 1</li>

        <li>&bull; item 2</li>

        <li>&bull; item 3</li>         

    </ul> <img src="../images/image2-thumb.jpg" class="left mainthumb" />
    <img src="../images/image3-thumb.jpg" class="left mainthumb" />

由于某种原因html代码编辑没有显示上面的代码块主要图像与主类

Answer 1

您可以在这里考虑$ this的用户。如果不使用类名作为选择器。使用$ this construct。

假设您的每个主要图像都接近重击指甲组。因此，要找到最近的.main类元素，我们可以使用最接近的

  $(function image_swap() { 
     $('.mainthumb').click(function (){
        $(this).prevAll('.main:first').attr('src', $(this).attr('src').replace('-thumb', ''));
     });
   });

这可能不完美，但您需要考虑各种选择器，例如next（），previous（）并找到最适合您的选择器。

Answer 2

如果您可以使用span或div以下代码包围图像组，那么您的html会出现问题

$('.mainthumb').click(function () {        
    $(this).parent().find('.main').attr('src', this.src.replace('-thumb', ''))
});

Check the demo

停止图像src在多个图像上更改

2 个答案: