我的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来更改图像？
当前回答
无法使用CSS更改图像源。
唯一可能的方法是使用Javascript或任何类似jQuery的Javascript库。
逻辑-
图像位于一个div中，并且该图像没有类或id。
因此，逻辑将是选择图像所在的div中的元素。
然后使用循环选择所有图像元素，并使用Javascript/jQuery更改图像src。
带有演示输出的示例代码-
$（文档）.ready（函数）{$（“button”）.click（函数）{$（“#d1.c1 a”）.each（函数）{$（this）.children（'img'）.attr（'src'，'https://www.gravatar.com/avatar/e56672acdbce5d9eda58a178ade59ffe');});});});<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/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><button>更改图像</button>
其他回答
如果不仅有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>
您也可以通过以下方式使用jQuery执行此操作：
$(".c1 img").click(function(){
$(this).attr('src','/new/image/src.jpg');
});
如果图像源有多个状态，则可以有一个条件。
希望这能奏效
<img id="dummyimage" src="http://dummyimage.com/450x255/" alt="" />
<button id="changeSize">Change Size</button>
$(document).ready(function() {
var flag = 0;
$("button#changeSize").click(function() {
if (flag == 0) {
$("#dummyimage").attr("src", "http://dummyimage.com/250x155/");
flag = 1;
} else if (flag == 1) {
$("#dummyimage").attr("src", "http://dummyimage.com/450x255/");
flag = 0;
}
});
});
您应该向图像标记添加id属性，如下所示：
<div id="d1">
<div class="c1">
<a href="#"><img id="img1" src="img1_on.gif"></a>
<a href="#"><img id="img2" src="img2_on.gif"></a>
</div>
</div>
然后您可以使用此代码更改图像的来源：
$(document).ready(function () {
$("#img1").attr({ "src": "logo-ex-7.png" });
$("#img2").attr({ "src": "logo-ex-8.png" });
});
简短但准确
$("#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>
