javascript - JQuery 的问题-切换多个图像

Question

http://feathertest.me.pn/test.php上面是我正在开发的一个网站的链接。

我有两个主要特点:

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();
       });
   })
   

我的问题:在我单击其中一个缩略图后(图像的放大版本成功显示在上面的大框中)，然后当我单击其中一个彩色图 block 时，扫帚图像仅针对缩略图成功更改，但是，图像大框中是上次单击的前一种颜色的图像。我希望该图像也更改为所选颜色。

我的 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 src:

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

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

请更新缩略图点击处理程序，以便它只更新特定的.bigImg，如下所示:

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

我还看到您为每个 div 元素分配了 prod-stop 作为 ID，我想说，为多个元素提供相同的 id 不是一个好主意。你最好将其更改为类名，或者使 id 唯一。