使用 jQuery 更改图像源

我的 DOM 看起来像这样：

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

当有人单击图像时，我希望图像 src 更改为<img src="imgx_off.gif">其中x表示图像编号 1 或 2。

这可能吗，还是我必须使用 CSS 来更改图像？

答案

您可以使用 jQuery 的attr（）函数。例如，如果您的img标签的id属性为 “my_image”，则可以执行以下操作：

<img id="my_image" src="first.jpg"/>

然后，您可以使用 jQuery 更改图像的src ，如下所示：

$("#my_image").attr("src","second.jpg");

要将其附加到click事件，您可以编写：

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

要旋转图像，可以执行以下操作：

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

人们在更改图像源时常犯的常见错误之一是不等待图像加载来执行诸如成熟图像尺寸之类的后续操作。您将需要使用 jQuery .load()方法在图像加载后执行操作。

$('yourimageselector').attr('src', 'newsrc').load(function(){
    this.width;   // Note: $(this).width() will not work for in memory images

});

修改原因： https ： //stackoverflow.com/a/670433/561545

了解更多信息。我尝试使用以下语法在广告图片的 jquery 中使用 attr 方法设置 src 属性，例如： $("#myid").attr('src', '/images/sample.gif');

此解决方案很有用，并且可以使用，但是如果更改路径，则图像的路径也会更改而无法使用。

我正在寻找解决此问题的方法，但没有发现任何问题。

解决方案是将 “\” 放在路径的开头： $("#myid").attr('src', '\images/sample.gif');

这个技巧对我非常有用，我希望对其他人也有用。