如何更改onClick上的图像源？

Question

好吧,我有一个包含图像的div,

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

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

我搜索过但找不到这就是我在这里问的原因.我是jQuery的初学者,所以如果你能很好地解释一切,我将不胜感激.

Answer 1

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

这可能会成功,但我不确定这是否是一种很好的方法,因为必须再次加载纹理.大多数情况下,您将在div中已经存在的两个图像之间切换.在click方法上将one设置为visible,将one设置为hidden.

例

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

}

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