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

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

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

解决方案是将“\”放在路径的开头：$（“#myid”）.attr（'src'，'\images/sample.gif'）；

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

2016-07-20 10:01:23

其他回答

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

2011-09-13 21:44:03

无法使用CSS更改图像源。

唯一可能的方法是使用Javascript或任何类似jQuery的Javascript库。

逻辑-

图像位于一个div中，并且该图像没有类或id。

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

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

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

$（文档）.ready（函数）{$（“button”）.click（函数）{$（“#d1.c1 a”）.each（函数）{$（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>更改图像</button>

2016-04-08 05:55:12

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

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

2016-04-04 17:48:10

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

2019-04-04 13:59:58

我在尝试调用“重新注册”按钮时遇到了同样的问题。经过一些搜索，现在以下功能在几乎所有著名的浏览器（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重新阅读图像。

2017-07-24 12:57:15

使用jQuery更改图像源

推荐文章

最新文章

标签