Javascript 用jQuery替换图像

我在一个页面上有一组图像，当用户单击图像a JPG时，我想用相应的动画GIF替换该图像。GIF的src包含在数据gifsrc属性中

我四处寻找jQuery函数，但我很难将任何有意义的东西放在一起

---

以前有人编写过这样的函数吗？

对于这样一个琐碎的任务，您不需要jQuery

document.body.addEventListener("click",function(e) {
    var attr;
    if( e.target.nodeName == "IMG" && (attr = e.target.getAttribute("data-gifsrc")) {
        e.target.src = attr;
    }
},false);

如果浏览器兼容性存在问题，请使用以下方法：

function addEvent(element,event,callback) {
    if( element.addEventListener) element.addEventListener(event,callback,false);
    else element.attachEvent("on"+event,function() {callback.call(element,window.event);});
}
addEvent(document.body,"click",function(e) {
    var tgt = e.srcElement || e.target, attr;
    if( tgt.nodeName == "IMG" && (attr = tgt.getAttribute("data-gifsrc")) {
        tgt.src = attr;
    }
});

太棒了。

工作小提琴：

HTML:

---

您至少需要尝试一些东西，然后在这里发布您的尝试。我将帮助您开始->$'img'。单击，函数{this.src=$this.data'gifsrc'；}；干的$这是一个非常昂贵的操作，对于给定的值，您不应该多次使用它。另外，为什么需要添加一个类$document.onclick[data gifsrc]，函数{this.src=this.getAttributedata gifsrc；}…您是对的，但是添加一个类更有意义，并且更容易找到元素谢谢。我本来会发布一些东西的，但是我的jQuery真的是支离破碎，简直是垃圾。令人尴尬的是。我每隔几个月才用一次，所以总是吃不消。

<div class="imageDiv">
    <input type="image" class="image" src="http://www.extremetech.com/wp-content/uploads/2013/05/image-1.jpg" data-gifsrc="tmapimage.img" />
</div>

$(document).on("click", ".image", function () {
    var gifsrc = $(this).data(gifsrc); //get the data-gifsrc value in variable
    $(this).attr("src", gifsrc); // replace the src attribute with gifsrc variable

});