我的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来更改图像？
当前回答
您应该向图像标记添加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" });
});
其他回答
更多信息。我尝试在jquery中使用attr方法为广告图像设置src属性，语法如下：$（“#myid”）.attr（'src'，'/images/sample.gif'）；
此解决方案很有用，而且可以工作，但如果更改路径，也会更改图像的路径，并且无法工作。
我一直在寻找解决这个问题的方法，但一无所获。
解决方案是将“\”放在路径的开头：$（“#myid”）.attr（'src'，'\images/sample.gif'）；
这个技巧对我很有用，我希望它对其他人有用。
使用jQuery click（）更改图像源
元素：
<img class="letstalk btn" src="images/chatbuble.png" />
代码：
$(".letstalk").click(function(){
var newsrc;
if($(this).attr("src")=="/images/chatbuble.png")
{
newsrc="/images/closechat.png";
$(this).attr("src", newsrc);
}
else
{
newsrc="/images/chatbuble.png";
$(this).attr("src", newsrc);
}
});
可以使用jQuery的attr（）函数。例如，如果img标记的id属性为“my_image”，则可以执行以下操作：
<img id="my_image" src="first.jpg" alt="Insert link 1 alt text here" />
然后，您可以使用jQuery更改图像的src，如下所示：
$("#my_image").attr("src","second.jpg");
要将其附加到单击事件，可以编写：
$('#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);
}
});
您应该向图像标记添加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" });
});
如果不仅有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>
