使用 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 来更改图像？
19th July, 2016 15:39 PM，问题支持计数 369 和 @jonstjohn 回答支持计数 931。但是，真倒霉，@OP 在 Feb 17 '09 at 2:57 之后没有登录。 :( 而且，@jonstjohn 回答保持未标记。
alt 属性。特别是在链接中使用时，图像需要辅助技术的替代文本或图像无法加载的情况，无论出于何种原因。
您可以使用 jQuery 的 attr() 函数。例如，如果您的 img 标记具有“my_image”的 id 属性，您可以这样做：
<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);
}
});
人们在更改图像源时常犯的错误之一是没有等待图像加载来执行诸如成熟图像大小等后续操作。您将需要使用 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
如果您多次更新图像并且它被缓存并且没有更新，请在末尾添加一个随机字符串：
// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());
了解更多信息。我尝试在 jquery 中使用 attr 方法为广告图像设置 src 属性，使用如下语法：$("#myid").attr('src', '/images/sample.gif');
此解决方案很有用并且有效，但如果更改路径也会更改图像路径并且无法正常工作。
我一直在寻找解决此问题的方法，但一无所获。
解决方案是将“\”放在路径的开头：$("#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>
我将向您展示如何更改图像 src，以便当您单击图像时，它会在您的 HTML 中的所有图像中旋转（特别是在您的 d1 id 和 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;变量 $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 首先将我们的计数器加一，然后根据图像的数量修改该数字。这将使结果索引从 0 循环到 length-1，这是 $images 对象的索引。这意味着此代码将适用于 2、3、5、10 或 100 张图像......按顺序循环浏览每个图像，并在到达最后一张图像时从第一张图像重新开始。此外，.attr() 用于获取和设置图像的“src”属性。为了从 $images 对象中挑选元素，我使用 $(selector, context) 形式将 $images 设置为 jQuery 上下文。然后我使用 .eq() 只选择具有我感兴趣的特定索引的元素。
带有 3 张图片的 jsFiddle 示例
您还可以将 src 存储在一个数组中。
jsFiddle example with 3 images
以下是如何将来自锚标记的 href 合并到图像周围：
jsFiddle example
希望这可以工作
<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;
}
});
});
您应该将 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" });
});
你也可以用 jQuery 这样做：
$(".c1 img").click(function(){
$(this).attr('src','/new/image/src.jpg');
});
如果图像源有多个状态，您可以有一个条件。
尝试调用重新验证码按钮时我遇到了同样的问题。经过一番搜索，现在以下功能在几乎所有著名的浏览器（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 重新渲染图像。
使用 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);
}
});
我在这里制作了一个具有此功能的代码笔。我也会在这里给你一个代码的细分。
$(function() { //监听女孩按钮的点击 $('#girl-btn').click(function() { // 当女孩按钮被点击时，改变#square图片的来源成为女孩 PNG $('#square').prop("src", "https://homepages.cae.wisc.edu/~ece533/images/girl.png"); }); //监听a click on the plane button $('#plane-btn').click(function() { // 当平面按钮被点击时，将#square图像的来源更改为平面PNG $('#square ').prop("src", "https://homepages.cae.wisc.edu/~ece533/images/airplane.png"); }); //监听点击水果按钮 $('# fruits-btn').click(function() { // 当点击了 fruits 按钮后，将 #square 图像的来源更改为 fruits PNG $('#square').prop("src", " https://homepages.cae.wisc.edu/~ece533/images/fruits.png"); }); }); 
我今天也有同样的疑惑，我就是这样做的：
//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');
});
这是在 Vanilla（或简单的纯）JavaScript 中完成它的保证方法：
var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;
只是一个补充，使它更小：
$('#imgId').click(function(){
$(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});
简短但准确
$("#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", // 任意 - 例如："img1_on.gif", "https://picsum.photos/id/238/40/40 ", // 任意 - 例如："img2_on.gif" ]; $("#d1 img").click(e=> e.target.src= pic[e.target.src.match(pic[0]) ? 1:0]);
无法使用 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'); }); }); });
关注公众号
不定期副业成功案例分享
想领先一步获取最新的外包任务吗？
立即订阅
HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。