Question

我在页面上有一堆图像，当用户点击图像（JPG）时，我想用相应的动画GIF替换该图像。 GIF的src包含在data-gifsrc属性中。

我已经四处寻找jQuery函数，但我无法将任何有意义的东西放在一起。

有没有人之前写过这样的函数？

Answer 1

你不需要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;
    }
});

Vanilla JS awesome 。

Answer 2

工作小提琴：http://jsfiddle.net/x4VUv/

HTML：

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

Jquery：

$(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

});

用jQuery替换图像

2 个答案: