我的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来更改图像?


当前回答

只是一个补充,使其更为微小:

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

其他回答

更多信息。我尝试在jquery中使用attr方法为广告图像设置src属性,语法如下:$(“#myid”).attr('src','/images/sample.gif');

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

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

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

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

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

代码笔

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

只是一个补充,使其更为微小:

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

我今天也有同样的惊奇,我是这样做的:

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

我在尝试调用“重新注册”按钮时遇到了同样的问题。经过一些搜索,现在以下功能在几乎所有著名的浏览器(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”用于呈现新的captcha图像,在您的情况下可以忽略。最重要的一点是生成新的URL,迫使FF和IE重新阅读图像。