简短但准确

$("#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>

当改变图像源时，人们会犯的一个常见错误是不等待图像加载来执行后续操作，如成熟的图像大小等。在图像加载之后，您需要使用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

我将向您展示如何更改图像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示例

这是在Vanilla（或简单的Pure）JavaScript中完成任务的保证方法：

var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;

希望这能奏效

<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;
        }
    });
});

我在这里做了一个完全具有这种功能的代码笔。我也会在这里给你一个代码的分解。

代码笔

$（函数）{//倾听女孩按钮的点击$（'#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>