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

我正在使用：

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

使我的主图像在单击缩略图时更改为其他图像

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

因此，产品一有：

具有类的主图像具有类的主缩略图图像 mainthumb和另一个具有mainthumb类的缩略图图像

产品二

具有类的主图像具有类的主缩略图图像 mainthumb和另一个具有mainthumb类的缩略图图像

等等

所以，当我点击产品一的缩略图时，所有的主图像都会变成缩略图图片，因为它们都有相同的类-有没有办法避免每个产品都有不同的类

HTML:

随附：
&公牛；项目1
&公牛；项目2
&公牛；项目3

---

由于某种原因，HTML代码编辑不显示在该代码块之上，主图像与主

类，你可以考虑这里的用户。如果是，则不使用类名作为选择器。在这个构造中使用$

假设你的每一张主图像都接近“重击钉”组。所以要找到最近的。main类元素，我们可以使用最近的

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

---

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

如果您可以在图像组周围使用

span

或

div

以下代码就可以了，那么您的html就有点问题了

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

---

你可以考虑这里的用户。如果是，则不使用类名作为选择器。使用$this构造。

maintumb

类应用于什么？你能给出一些html代码或一个帮助很大的提琴吗？jsfiddle：为什么不把完整的代码放在提琴里呢？@John你能把你的html代码也放在一起吗，也许我们可以通过研究找到更好的解决方案。@John刚刚在我的答案中做了一个快速更改，你能试试新的代码吗？我添加了html，但它没有显示在最上面：很酷，因为图像src不可用，我试过你摆弄alt属性。使用prevAll（'.main:first'），这将帮助您更新上面的代码[而不是fiddle]，这应该可以工作。干杯你必须复制粘贴代码。。。你试过调试它吗？您是否尝试将$（this.prevAll（'.main:first'）.attr（'src'）记录到控制台或警告其值？你的成功有多大？看看你错在哪里。

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