我的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来更改图像？
当前回答
我在这里做了一个完全具有这种功能的代码笔。我也会在这里给你一个代码的分解。
代码笔
$（函数）{//倾听女孩按钮的点击$（'#girl btn'）.click（函数）{//单击女孩按钮后，将#square图像的源更改为女孩PNG$（'#square'）.prop（“src”，“https://homepages.cae.wisc.edu/~ece533/images/girl.png“）；});//聆听飞机按钮的点击$（“#plane btn”）.click（函数）{//单击平面按钮后，将#square图像的源更改为平面PNG$（'#square'）.prop（“src”，“https://homepages.cae.wisc.edu/~ece533/images/airplane.png“）；});//聆听水果按钮的点击$（“#fruits btn”）.click（函数）{//单击水果按钮后，将#square图像的源更改为水果PNG$（'#square'）.prop（“src”，“https://homepages.cae.wisc.edu/~ece533/images/fruits.png“）；});});<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><img src=“https://homepages.cae.wisc.edu/~ece533/images/girl.png“id=”square“/>＜div＞<button id=“girl btn”>女孩</button><button id=“plane btn”>平面</button><button id=“fruits btn”>水果</button><a href=“https://homepages.cae.wisc.edu/~ece533/images/“>图像来源</a></div>
其他回答
我在这里做了一个完全具有这种功能的代码笔。我也会在这里给你一个代码的分解。
代码笔
$（函数）{//倾听女孩按钮的点击$（'#girl btn'）.click（函数）{//单击女孩按钮后，将#square图像的源更改为女孩PNG$（'#square'）.prop（“src”，“https://homepages.cae.wisc.edu/~ece533/images/girl.png“）；});//聆听飞机按钮的点击$（“#plane btn”）.click（函数）{//单击平面按钮后，将#square图像的源更改为平面PNG$（'#square'）.prop（“src”，“https://homepages.cae.wisc.edu/~ece533/images/airplane.png“）；});//聆听水果按钮的点击$（“#fruits btn”）.click（函数）{//单击水果按钮后，将#square图像的源更改为水果PNG$（'#square'）.prop（“src”，“https://homepages.cae.wisc.edu/~ece533/images/fruits.png“）；});});<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><img src=“https://homepages.cae.wisc.edu/~ece533/images/girl.png“id=”square“/>＜div＞<button id=“girl btn”>女孩</button><button id=“plane btn”>平面</button><button id=“fruits btn”>水果</button><a href=“https://homepages.cae.wisc.edu/~ece533/images/“>图像来源</a></div>
如果您多次更新图像，它会被缓存不更新，在末尾添加一个随机字符串：
// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());
当改变图像源时，人们会犯的一个常见错误是不等待图像加载来执行后续操作，如成熟的图像大小等。在图像加载之后，您需要使用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或其他资源清除框架-每个用户每次都要下载很多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>
简短但准确
$("#d1 img").click(e=> e.target.src= pic[e.target.src.match(pic[0]) ? 1:0] );
let图片=["https://picsum.photos/id/237/40/40“，//任意-例如：”img1_on.gif“，"https://picsum.photos/id/238/40/40“，//任意-例如：”img2_on.gif“];$（“#d1 img”）.click（e=>e.target.src=pic[e.target.src匹配（pic[0]）？1:0] );<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><div id=“d1”><div class=“c1”><a href=“#”><img src=“img1_on.gif”></a><a href=“#”><img src=“img2_on.gif”></a></div></div>
