我的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来更改图像？
当前回答
只是一个补充，使其更为微小：
$('#imgId').click(function(){
$(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});
其他回答
当改变图像源时，人们会犯的一个常见错误是不等待图像加载来执行后续操作，如成熟的图像大小等。在图像加载之后，您需要使用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
您应该向图像标记添加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" });
});
我将向您展示如何更改图像src，这样当您单击图像时，它会在HTML中的所有图像中旋转（特别是在d1id和c1类中）。。。无论您的HTML中有2个或更多图像。
我还将向您展示如何在文档准备好后清理页面，以便最初只显示一个图像。
完整的代码
$(function() {
var $images = $("#d1 > .c1 > a").clone();
var $length = $images.length;
var $imgShow = 0;
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") );
$("#d1 > .c1 > a").click(function(event) {
$(this).children().attr("src",
$("img", $images).eq(++$imgShow % $length).attr("src") );
event.preventDefault();
});
});
故障
创建包含图像的链接的副本（注意：您还可以使用链接的href属性来添加功能…例如，在每个图像下面显示工作链接）：var$images=$（“#d1>.c1>a”）.clone（）；检查HTML中有多少图像，并创建一个变量来跟踪显示的图像：var$length=$images.length；var$imgShow=0；修改文档的HTML，以便只显示第一个图像。删除所有其他图像。$（“#d1>.c1”）.html（$（“#d1>.c1>a:first”））；单击图像链接时绑定要处理的函数。$（“#d1>.c1>a”）.click（函数（事件）｛$（this）.children（）.attr（“src”，$（“img”，$images）.eq（++$imgShow%$length）.attr（“src“））；event.prpreventDefault（）；});上述代码的核心是使用++$imgShow%$length循环遍历包含图像的jQuery对象++$imgShow%$length首先将计数器增加1，然后将该数字与图像的数量进行比较。这将使生成的索引从0循环到长度-1，这是$images对象的索引。这意味着该代码可以处理2、3、5、10或100个图像。。。按顺序循环通过每个图像，并在到达最后一个图像时在第一个图像处重新开始。此外，.attr（）用于获取和设置图像的“src”属性。为了从$images对象中选择元素，我使用表单$（选择器，上下文）将$images设置为jQuery上下文。然后，我使用.eq（）选择具有我感兴趣的特定索引的元素。
jsFiddle示例，包含3个图像
您还可以将src存储在阵列中。jsFiddle示例，包含3个图像
下面是如何将图像周围的锚标记中的hrefs合并在一起：jsFiddle示例
如果不仅有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>
如果您多次更新图像，它会被缓存不更新，在末尾添加一个随机字符串：
// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());
