JQuery- 切换多张图片时出现问题

Question

http://feathertest.me.pn/test.php 以上是我正在处理的网站的 link。

我有两个主要特点：

当我点击下面的缩略图时，放大的版本出现在上面更大的方框里。我为此使用的代码是：

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

在右侧，我有描绘可用颜色的小方块。单击每种颜色时，左侧的扫帚图像将更改为显示所选颜色。我使用的代码是：

<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 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 不是一个好主意。您最好将其更改为 class 名称，或使 id 唯一。

JQuery- 切换多张图片时出现问题

Trouble with JQuery- switching multiple images

javascript

jquery

html

product

switching