Question

我已经查看过其他一些问题但无法找到解决方案。我有四个按钮，我希望它们在使用jquery单击时更改连衣裙的颜色。在Dreamweaver中，我设法让它工作，但不是替换图像似乎替换按钮，任何关于我出错的地方的建议将非常感激。我创建了一个jsfiddle，但它的工作原理更少，这里是：http://jsfiddle.net/zd72f/

也很抱歉没有正确链接小提琴，希望我添加的链接可以正常工作。

<body style="margin:0 0 0 0;">
    <div class="background">
        <div id="index-dress">

    </div>
</body>

提前感谢您的帮助！

Answer 1

您需要在您的小提琴中包含jQuery，并且只需更改src div中放置的图像的#index-dress：

$('#index-dress img').attr('src'........

而不是像你现在所做的那样的所有图像：

$('img').attr('src'........

最终代码应如下所示：

$(document).ready(function () {
    $('.buttons').click(function () {
        $('#index-dress img').attr('src', "http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/scarlet-dress-sized.png");
    });
    $('.navy').click(function () {
        $('#index-dress img').attr('src', "http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/navy-dress-sized.png");
    });
    $('.purple').click(function () {
        $('#index-dress img').attr('src', "http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/purple-dress-sized.png");
    });
    $('.yellow').click(function () {
        $('#index-dress img').attr('src', "http://public.layar.com/Customer_Care/Demos/fashion/htmldress/images/yellow-dress-sized.png");
    });
});

<强> Updated Fiddle

Answer 2

只需将范围添加到jQuery图像选择器：

...
$('img', '#index-dress').attr(..
...

http://jsfiddle.net/zd72f/14/

使用4个按钮从jQuery交换图像onClick

2 个答案: