如何更改onClick的图像源？答案

【问题标题】：How to change the image source onClick?如何更改onClick的图像源？
【发布时间】：2011-09-18 21:47:18
【问题描述】：

好的，我有一个包含图像的 div，

<div id="image">
<img src="images/medium/1.png" />
</div>

现在我想在单击带有 jQuery 的链接时将 src 更改为 images/medium/2.png。

我已经搜索但找不到它，这就是我在这里问的原因。我是 jQuery 的初学者，如果你能很好地解释一切，我将不胜感激。

【问题讨论】：

标签： jquery image onclick src

【解决方案1】：

$("#image img").attr("src", "images/medium/2.png") 应该可以解决问题。它选择带有id“图像”的元素中的img 元素，然后更改src 属性。

您可以在链接的click 事件处理程序中运行它，如下所示：

$("#linkId").click(function() {
    $("#image img").attr("src", "images/medium/2.png");
});

【讨论】：

不，你不能分配给那个。
OP问了什么，点击时如何更改？
所以 kingjiv 的上述评论是有道理的，我最初拥有的是 .attr("src") = "2.png" - 但你不能用 jQuery 那样分配值。

【解决方案2】：

$("LINK SELECTOR GOES HERE").click(function(){
    $("#image img").attr("src","images/medium/2.png");
});

但如果你真的只打算这样做一次，你可能想要使用

http://api.jquery.com/one/

【讨论】：

这将更新链接选择器选择的任何内容的 src 属性。 OP 想要更新不相关图像的 src 属性。
@druttka 你说得对，当我意识到他想点击一个链接而不是元素时，我做对了，然后在编辑中搞砸了。谢谢。

【解决方案3】：

$('#image').click(function(){ // Or whatever element you want to click on
  $('img', '#image').attr('src', 'images/medium/2.png'); // Change the src
});

【讨论】：

【解决方案4】：

$('a.imageChanger').click(function()
{
    $('#image img').attr('src','newImage.png');
}

这可能会解决问题，但我不确定这是否是一种好方法，因为必须再次加载纹理。大多数时候，您将在 div 中已经存在的两个图像之间切换。在 click 方法上设置一个为可见，一个为隐藏。

例子

<a href="somelink" class="imageChanger">Click here</a>

<div id="image">
    <img class="currentImage">
    <img class="hiddenImage">
</div>

javascript：

// toggle both classes that display or hide an image.
$('a.imageChanger').click(function()
{
    $('#image img')each(function()
    {
        $(this).toggleClass('currentImage');
        $(this).toggleClass('hiddenImage');
    });
});

此脚本仅适用于 2 张图片，不适用于 3 张或更多图片。但是已经有很多旋转器插件可用。
还有css：

.hiddenImage
{
    display:none;
}

.currentImage
{

}

我没有测试这段代码，但它看起来像这样。这只是一个概念。

【讨论】：

哦，我刚注意到这个答案 XD 我会试试这个:)
@Roy：实际上它应该可以工作，但我会给你一个例子来说明如何做到这一点。
@Roy：抱歉，我没有正确阅读您的问题。我会立即编辑帖子。