Question

http://feathertest.me.pn/test.php 以上是我正在努力的网站的链接。

我有两个主要功能：

当我点击下面的缩略图时，上面较大的框上会出现一个放大的版本。我用的代码是：

import itertools

def printTable(table):
    newlist = list(itertools.chain.from_iterable(tableData))
    longWord = len(max(newlist))

    for i in range(len(table[0])):
        for j in range(len(table)):
            print ((table[j][i]).rjust(longWord), end = " ")
        print ("\n")
    print (newlist)
    print (str(longWord))
    print (max(newlist))



tableData = [['apples', 'oranges', 'cherries', 'banana'],
             ['Alice', 'Bob', 'Carol', 'David'],
             ['dogs', 'cats', 'moose', 'goose']]

在右侧，我有方形瓷砖，描绘了可用的颜色。单击每种颜色时，左侧的扫帚图像将更改为显示所选颜色。我使用的代码是：
```
$(function(){
    $(".thumb").click(function(){
        var imagesrc = $(this).children().prop('src');
        $('.bigImg').attr('src', imagesrc);
    });
});
```

我的问题： 点击其中一个缩略图（图像的放大版本成功显示在上面的大框上）然后当我点击其中一个彩色图块时，扫帚图像仅成功更改缩略图，但是，图像在大框中是前一个颜色的最后一次单击图像。我希望该图像也能改变为所选择的颜色。

我的HTML代码段（我只展示了两种颜色的代码）：

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

请帮助。
在此先感谢

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唯一。

JQuery问题 - 切换多个图像

1 个答案: