小开

您可以使用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");

要将其附加到click事件，您可以编写：

$('#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);}});

小开

我将向您展示如何更改图像src，以便当您单击图像时，它会在超文本标记语言中的所有图像中旋转（特别是在您的d1 id和c1 class中）……无论您的超文本标记语言中是否有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();  ;
```
Check how many images were in the HTML and create a variable to track which image is being shown:
```
var $length = $images.length;var $imgShow = 0;
```
Modify the document's HTML so that only the first image is being shown. Delete all the other images.
```
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") );
```
Bind a function to handle when the image link is clicked.
```
    $("#d1 > .c1 > a").click(function(event) {$(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );event.preventDefault();});
```
上面代码的核心是使用++$imgShow % $length循环遍历包含图像的jQuery对象。++$imgShow % $length首先将我们的计数器增加1，然后它根据图像的数量修改该数字。这将使生成的索引从0循环到length-1，即$images对象的索引。这意味着此代码将使用2、3、5、10或100个图像…依次循环通过每个图像，并在到达最后一张图像时在第一张图像处重新启动。

此外，#0用于获取和设置图像的“src”属性。为了从$images对象中选择元素，我使用$(selector, context)的形式将$images设置为jQuery上下文。然后我使用#4仅选择具有我感兴趣的特定索引的元素。

jsFiddle例子3图像

您还可以将src存储在数组中。
jsFiddle示例与3个图像

以下是如何将锚点标签中的hrefs合并到图像周围：
jsFiddle示例

小开

您也可以通过以下方式使用jQuery执行此操作：

$(".c1 img").click(function(){$(this).attr('src','/new/image/src.jpg');});

如果图像源有多个状态，您可以有一个条件。

小开

如果不仅有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.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

小开

我今天也有同样的奇迹，我是这样做的：

//<img src="actual.png" alt="myImage" class=myClass>$('.myClass').attr('src','').promise().done(function() {$(this).attr('src','img/new.png');});

小开

没有办法使用CSS更改图像源。

唯一可能的方法是使用javascript或任何javascript库，如jQuery。

逻辑

图像在div中，该图像没有class或id。

因此，逻辑将选择图像所在的div内的元素。

然后用循环选择所有图像元素并用javascript/jQuery更改图像src。

带有演示输出的示例代码-

$(document).ready(function(){$("button").click(function(){$("#d1 .c1 a").each(function(){$(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>Change The Images</button>

小开

有关更多信息。我尝试在jQuery中使用attr方法为广告图像设置src属性，例如：$("#myid").attr('src', '/images/sample.gif');

这个解决方案是有用的，它的工作原理，但如果改变路径也改变路径的图像和不工作。

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

解决方案是将“\”放在路径的开头：$("#myid").attr('src', '\images/sample.gif');

这个技巧对我很有用，我希望它对其他人有用。

小开

我在尝试调用重新验证码按钮时遇到了同样的问题。经过一些搜索，现在下面的函数在几乎所有著名的浏览器（chrome、Firefox、IE、Edge…）中都可以正常工作：

function recaptcha(theUrl) {$.get(theUrl, function(data, status){});$("#captcha-img").attr('src', "");setTimeout(function(){$("#captcha-img").attr('src', "captcha?"+new Date().getTime());}, 0);}

theUrl用于渲染新的验证码图像，在您的情况下可以忽略。最重要的一点是生成新的URL，强制FF和IE重新渲染图像。

小开

希望这能奏效

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

小开

只是一个补充，让它更小：

$('#imgId').click(function(){$(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');});

小开

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

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

小开

使用jQueryclick()更改图像源

元素：

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

小开

你应该将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" });});

小开

如果您多次更新图像并获得缓存和不更新，在末尾添加一个随机字符串：

// update image in dom$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());

小开

简短但准确

$("#d1 img").click(e=> e.target.src= pic[e.target.src.match(pic[0]) ? 1:0] );

let pic=["https://picsum.photos/id/237/40/40", // arbitrary - eg: "img1_on.gif","https://picsum.photos/id/238/40/40", // arbitrary - eg: "img2_on.gif"];
$("#d1 img").click(e=> e.target.src= pic[e.target.src.match(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>

小开

我在这里制作了一个完全具有此功能的代码页。我也会在这里给你一个代码细分。

代码

$(function() {
//Listen for a click on the girl button$('#girl-btn').click(function() {
// When the girl button has been clicked, change the source of the #square image to be the girl PNG$('#square').prop("src", "https://homepages.cae.wisc.edu/~ece533/images/girl.png");});
//Listen for a click on the plane button$('#plane-btn').click(function() {
// When the plane button has been clicked, change the source of the #square image to be the plane PNG$('#square').prop("src", "https://homepages.cae.wisc.edu/~ece533/images/airplane.png");});
//Listen for a click on the fruit button$('#fruits-btn').click(function() {
// When the fruits button has been clicked, change the source of the #square image to be the fruits 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">Girl</button><button id="plane-btn">Plane</button><button id="fruits-btn">Fruits</button>
<a href="https://homepages.cae.wisc.edu/~ece533/images/">Source of Images</a></div>

使用jQuery更改图像源

jsFiddle例子3图像

逻辑

带有演示输出的示例代码-

简短但准确