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方法上设置一个为visible，一个为隐藏。

实施例

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

}

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

Answer 2

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

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

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

Answer 3

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

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

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

Answer 4

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

如何更改onClick上的图像源？

4 个答案: