如何更改图片来源onClick？

Question

好吧，我有一个包含图像的DIV，

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

现在我想的改变src到图像/中/ 2.png当我点击使用jQuery的链接。

我已经搜索，但无法找到它，这就是为什么我问这里。 我是jQuery的初学者，所以如果你解释得很好，我将不胜感激。

Answer 1

$("#image img").attr("src", "images/medium/2.png")应该这样做。它使用id“image”选择元素中的img元素，然后更改src属性。

您可以像这样在您的链接的click事件处理程序运行以下命令：

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

Answer 2

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

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

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

Answer 3

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

Answer 4

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

这可能会诀窍，但我不确定这是否是一种很好的方式，因为纹理必须重新加载。大多数情况下，您将在您的div中已经存在的两个图像之间切换。将一个设置为可见，另一个设置为隐藏在点击方法上。

例

<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 
{ 

} 

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