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


当前回答

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

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

其他回答

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

要将其附加到单击事件,可以编写:

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

如果您多次更新图像,它会被缓存不更新,在末尾添加一个随机字符串:

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

如果不仅有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中使用attr方法为广告图像设置src属性,语法如下:$(“#myid”).attr('src','/images/sample.gif');

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

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

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

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

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