使用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 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方法为广告图像设置src属性，语法如下：$（“#myid”）.attr（'src'，'/images/sample.gif'）；

此解决方案很有用，而且可以工作，但如果更改路径，也会更改图像的路径，并且无法工作。

我一直在寻找解决这个问题的方法，但一无所获。

解决方案是将“\”放在路径的开头：$（“#myid”）.attr（'src'，'\images/sample.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

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

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

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

代码笔

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