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

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

javascript jquery

Javascript 使用jQuery从4个按钮交换图像onClick,javascript,jquery,onclick,Javascript,Jquery,Onclick,我看了其他一些问题，找不到解决办法。我有四个按钮，我想让它们在使用jquery单击它们时改变衣服的颜色。在Dreamweaver中，我设法让它工作起来，但它似乎并没有取代图像，而是取代了按钮，任何关于我哪里出错的建议都将不胜感激。我创建了一个jsfiddle，但效果更差，如下所示：也很抱歉没有正确链接小提琴，希望我添加的链接能起作用 <body style="margin:0 0 0 0;"> <div class="background"> &

我看了其他一些问题，找不到解决办法。我有四个按钮，我想让它们在使用jquery单击它们时改变衣服的颜色。在Dreamweaver中，我设法让它工作起来，但它似乎并没有取代图像，而是取代了按钮，任何关于我哪里出错的建议都将不胜感激。我创建了一个jsfiddle，但效果更差，如下所示：

也很抱歉没有正确链接小提琴，希望我添加的链接能起作用

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

    </div>
</body>

提前感谢您的帮助

您需要将jQuery包含在您的小提琴中，并且只更改放置在

#index dress

div中的图像的

src

：

$('#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");
    });
});

只需在jQuery图像选择器中添加一个作用域：

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

内部收尾div缺少收尾div标记？在小提琴上，您忘记加载jquerySorry，在JSFIDLE上，我忘记选择jquery 1.8.3，如果您单击它，您将看到我当前得到的结果。我是新来jquery的，所以再次为我确信这是一个非常基本的问题感到抱歉。这太完美了，非常感谢，非常感谢您的帮助Felix、Rahil、Adil、Lorenzo和Dave！费利克斯给了我我想要的确切答案。不确定我是否需要关闭此线程来表示我的问题已解决，如果需要，请有人向我指出。谢谢大家！