我的 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"/>
然后你可以src像这样用 jQuery改变你的图像：
$("#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
});
如果您多次更新图像并且它被缓存并且没有更新，请在末尾添加一个随机字符串：
// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());
想要查询更多的信息。我尝试使用以下语法在 jquery 中使用 attr 方法为广告图像设置 src 属性：$("#myid").attr('src', '/images/sample.gif');
此解决方案很有用，并且有效，但是如果更改路径也会更改图像的路径并且不起作用。
我一直在寻找解决此问题的方法，但一无所获。
解决方案是将 '\' 放在路径的开头：
$("#myid").attr('src', '\images/sample.gif');
这个技巧对我非常有用，我希望它对其他人有用。
如果不仅有 jQuery 或其他资源清除框架——每个用户每次下载很多 kb 只是为了一个简单的技巧——还有原生的 JavaScript（！）：
<img src="img1_on.jpg"
onclick="this.src=this.src.match(/_on/)?'img1_off.jpg':'img1_on.jpg';">
<img src="img2_on.jpg"
onclick="this.src=this.src.match(/_on/)?'img2_off.jpg':'img2_on.jpg';">
这可以写成通用且更优雅的：
<html>
<head>
<script>
function switchImg(img){
img.src = img.src.match(/_on/) ?
img.src.replace(/_on/, "_off") :
img.src.replace(/_off/, "_on");
}
</script>
</head>
<body>
<img src="img1_on.jpg" onclick="switchImg(this)">
<img src="img2_on.jpg" onclick="switchImg(this)">
</body>
</html>