使用jQuery更改图片源
我的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来更改图像？
你可以使用jQuery的attr（）函数。 例如，如果您的img标签具有“my_image”的id属性：
<img id="my_image" src="first.jpg"/>
然后你可以通过以下方式更改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); } });
人们在改变图像源时所犯的一个常见错误，就是不会等待图像加载来完成像图像大小成熟等.load()操作。您需要使用jQuery .load()方法在图像加载后执行.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中的所有图像（特别是在你的d1 id和c1类）…是否有2个或更多的图像在你的HTML。
在文档准备就绪后，我还将向您展示如何清理页面，以便最初只显示一个图像。
完整的代码
$(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(); }); });
细分
-
创build包含图像的链接的副本（注意：您还可以利用链接的href属性来增加function…例如在每个图像下面显示工作链接 ）：
var $images = $("#d1 > .c1 > a").clone(); ; -
检查HTML中有多less图像，并创build一个variables来跟踪显示的图像：
var $length = $images.length; var $imgShow = 0; -
修改文档的HTML，以便只显示第一个图像。 删除所有其他图像。
$("#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(); });上面代码的核心是使用
++$imgShow % $length来遍历包含图像的jQuery对象。++$imgShow % $length首先将我们的计数器加1，然后用有多less图像对这个数字进行修改。 这将使结果索引从0循环到length-1，这是$images对象的索引。 这意味着这个代码可以处理2,3,5,10或100张图像…按顺序循环显示每张图像，并在最后一张图像到达时在第一张图像上重新开始。此外，
.attr()用于获取和设置图像的“src”属性。 要从$images对象中选取元素，我使用$(selector, context)forms将$images设置为jQuery上下文 。 然后我使用.eq()来select具有我感兴趣的特定索引的元素。
jsFiddle 3个图像的例子
您也可以将src存储在一个数组中。
jsFiddle 3个图像的例子
以下是如何将锚定标记的hrefs合并到图像中的方法：
jsFiddle的例子
了解更多信息。 我尝试使用以下语法在jquery中为$("#myid").attr('src', 'http://img.dovov.comsample.gif'); image方法设置src属性： $("#myid").attr('src', 'http://img.dovov.comsample.gif');
这个解决scheme是有用的，它的工作原理，但如果改变path的变化也影响和不工作的path。
我寻求解决这个问题，但没有发现任何东西。
解决方法是将“\”放在path的开头： $("#myid").attr('src', '\images/sample.gif');
这个技巧对我来说非常有用，我希望这对其他人有用。
如果不仅有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来做到这一点：
$(".c1 img").click(function(){ $(this).attr('src','/new/image/src.jpg'); });
如果图像源有多个状态，则可以有条件。
如果你想使用jQuery的东西，你可能想看看jQuery循环插件，演示scrollRight （右下angular的例子）
我今天也有同样的想法，我这样做了：
//<img src="actual.png" alt="myImage" class=myClass> $('.myClass').attr('src','').promise().done(function() { $(this).attr('src','img/new.png'); });
尝试调用重新validation码button时遇到同样的问题。 经过一番search，现在几乎所有着名的浏览器（铬，火狐，IE浏览器，边缘…）下面的function工作正常：
function recaptcha(theUrl) { $.get(theUrl, function(data, status){}); $("#captcha-img").attr('src', ""); setTimeout(function(){ $("#captcha-img").attr('src', "captcha?"+new Date().getTime()); }, 0); }
'theUrl'用于渲染新的validation码图像，在您的情况下可以忽略。 最重要的一点是生成新的URL，强制FF和IE重新渲染图像。
没有办法用CSS来改变图像源。
唯一可行的方法是使用Javascript或任何Javascript库，如jQuery 。
逻辑-
图像是在一个div内，没有class或id与该图像。
因此，逻辑将select图像所在的div内的元素。
然后select所有带有循环的图像元素，并用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>
