JQuery切换多个图像的问题

Question

http://feathertest.me.pn/test.php 以上是链接到一个即时通讯工作的网站。

我有2层主要的功能：

1. 正如我在下面的缩略图单击，一个放大版本出现在更大的箱的上方。我使用的代码是：

   $(function(){ 
       $(".thumb").click(function(){ 
        var imagesrc = $(this).children().prop('src'); 
        $('.bigImg').attr('src', imagesrc); 
       }); 
   }); 
   

2. 在右侧，我有描绘可用颜色的小方形瓷砖。点击每种颜色时，左侧的扫帚图像将变为显示所选颜色。我使用的代码是：

   <script type="text/javascript"> 
       $(function() { 
        $('#showdiv1').click(function() { 
         $('div[id^=div]').hide(); 
         $('#div1').show(); 
        }); 
        $('#showdiv2').click(function() { 
         $('div[id^=div]').hide(); 
         $('#div2').show(); 
        }); 
   
       $('#showdiv3').click(function() { 
        $('div[id^=div]').hide(); 
        $('#div3').show(); 
       }); 
   
       $('#showdiv4').click(function() { 
        $('div[id^=div]').hide(); 
        $('#div4').show(); 
       }); 
   }) 
   

我的问题： 后我点击缩略图之一（放大图像的版本已成功显示在大框上方）然后当我点击其中一个颜色瓷砖时，扫帚图像只是成功地改变了缩略图，然而，大框中的图像是上一个颜色最后点击的图像。我希望该图像也可以更改为所选颜色。

我的HTML代码片段（我只显示两种颜色的代码）：

<div id="feather-prods" class="row"> 
       <div id="div1"> 
       <div id="prod-stop" class="col-md-5 col-sm-6 col-xs-8 col-xs-push-2 col-sm-push-1 col-md-push-1"> 
        <div class="prod-img"><img id="tab1show" class="tab-content bigImg" src="images/broom/monara-pp-1.jpg" alt="feather, Purple monara broom"></div> 

        <div class="thumbnailImg"> 
         <div id="tab1show" class="tab-content thumb"><img src="images/broom/monara-pp-1.jpg" alt="feather, Purple monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div id="tab1show" class="tab-content thumb"><img src="images/broom/monara-pp-2.jpg" alt="feather, Purple monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div id="tab1show" class="tab-content thumb"><img src="images/broom/monara-pp-3.jpg" alt="feather, Purple monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div id="tab1show" class="tab-content thumb"><img src="images/broom/monara-pp-4.jpg" alt="feather, Purple monara broom" border="0" width="100%" class="thumbImg" /></div> 
        </div> 
       </div> 
       </div> 

       <div id="div2" style="display:none;" > 
       <div id="prod-stop" class="col-md-5 col-sm-6 col-xs-8 col-xs-push-2 col-sm-push-1 col-md-push-1"> 
        <div class="prod-img"><img id="tab2show" class="tab-content bigImg" src="images/broom/monara-b-1.jpg" alt="feather, black monara broom"></div> 

        <div class="thumbnailImg"> 
         <div id="tab2show" class="tab-content thumb"><img src="images/broom/monara-b-1.jpg" alt="feather, black monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div id="tab2show" class="tab-content thumb"><img src="images/broom/monara-b-2.jpg" alt="feather, black monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div id="tab2show" class="tab-content thumb"><img src="images/broom/monara-b-3.jpg" alt="feather, black monara broom" border="0" width="100%" class="thumbImg" /></div> 
         <div id="tab2show" class="tab-content thumb"><img src="images/broom/monara-b-4.jpg" alt="feather, black monara broom" border="0" width="100%" class="thumbImg" /></div> 
        </div> 
       </div><!-- prod images end --> 
       </div> 
</div> 

请帮助。
在此先感谢

Answer 1

嗯，这是因为缩略图点击事件没有产生好的方式。 你设置以下方式bgimage源：

$('.bigImg').attr('src', imagesrc); 

和上面的代码实际上是设置为imagesrc文档中的所有元素.bigImg。所以，尽管你已经切换到其他div，你仍然可以看到最后点击的图像。

请更新缩略图单击处理程序，因此，它只会更新特定.bigImg，像以下：

$(function(){ 
    $(".thumb").click(function(){ 
     var imagesrc = $(this).children().prop('src'); 
     $('.bigImg', $(this).parent().parent()).attr('src', imagesrc); 
    }); 
}); 

而且我知道你已经分配prod-stop作为ID为每个div元素，和我说，这将相同的id赋给多个元素不是一个好主意。你最好把它改成类名，或者让id唯一。