使用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执行此操作：

$(".c1 img").click(function(){
     $(this).attr('src','/new/image/src.jpg');   
});

如果图像源有多个状态，则可以有一个条件。

2010-09-28 00:44:59

其他回答

您也可以通过以下方式使用jQuery执行此操作：

$(".c1 img").click(function(){
     $(this).attr('src','/new/image/src.jpg');   
});

如果图像源有多个状态，则可以有一个条件。

2010-09-28 00:44:59

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

简短但准确

$("#d1 img").click(e=> e.target.src= pic[e.target.src.match(pic[0]) ? 1:0] );

let图片=["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匹配（pic[0]）？1:0] );<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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>

2020-06-14 22:00:43

这是在Vanilla（或简单的Pure）JavaScript中完成任务的保证方法：

var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;

2018-11-13 10:46:38

使用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

使用jQuery更改图像源

推荐文章

最新文章

标签