javascript - JS : Image rollover

Question

我正在尝试使用 jQuery 中的 mouseover 事件将 img 的 src 替换为 img 的 id。但是我的控制台错误表明 $(...) 为空。

有人可以帮我吗？谢谢。

这是我的项目:

var $ = function (id) {
    return document.getElementById(id);
}

window.onload = function () {
var listNode = $("#image_rollovers img");
    $(document).ready(function() {
        listNode.each(function() {
            var oldURL = $(this).attr("src");
            var newURL = $(this).attr("id");

            var rolloverImage = new Image();
            rolloverImage.src = newURL;
            $(this).hover(
                function() {
                    $(this).attr("src", newURL);
                },
                function() {
                    $(this).attr("src", oldURL);
                }
);
});
});
}

https://jsfiddle.net/rn70Lqrr/

Answer 1

你的Javascript中有很多不必要的代码。我更新了 JFiddle 以解决这些问题。基本上不需要 id 函数，需要包含 JQuery。当您真正想做的是循环图像时，您试图循环遍历列表对象。

这里是更新的 fiddle 的链接:

https://jsfiddle.net/tuboaLnd/2/

这是更新后的 Jquery 代码:

$(document).ready(function() {
    var listNode = $("#image_rollovers li img");               
    listNode.each(function() {
        var oldURL = $(this).attr("src");
        var newURL = $(this).attr("id");
        var rolloverImage = new Image();
        rolloverImage.src = newURL;
        $(this).hover(
            function() {
                $(this).attr("src", newURL);
            },
            function() {
                $(this).attr("src", oldURL);
            }
        );
    });
});