JS:图像翻转

Question

我正在尝试使用jQuery中的鼠标悬停事件将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。您试图循环遍历list对象，而您真正想做的是循环遍历图像。

以下是更新后的小提琴的链接：

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

Answer 2

我是第二个SalientGreen。他比我快。:)我不会更新他的代码，但我让它像这样工作...

HTML (注意我添加的两个数据属性)

    <h1>Image Rollovers</h1>
    <ul id="image_rollovers">
        <li><img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Favicon_250x250.png" alt="" data-src="https://upload.wikimedia.org/wikipedia/en/6/6b/LifestylePodnetwork-250x250.png" data-old="https://upload.wikimedia.org/wikipedia/commons/0/05/Favicon_250x250.png" /></li>
    </ul>            

Javascript：

$(document).ready(function(){
  $('img').hover(
    function() {
      $(this).attr("src", $(this).data("src"));
    }, function() {
      $(this).attr("src", $(this).data("old"));
    }
  );
});

也许这会在将来对你有所帮助。:)

Answer 3

下面是我会怎么做：

​

$(document).ready(function () {
    // Preload images
    $('img[data-rollover-src]').each(function(img){
        var newURL = $(this).data('rollover-src');

        var rolloverImage = new Image();
        rolloverImage.src = newURL;       
    });
    
    $(document).on('mouseenter mouseleave','img[data-rollover-src]',function() {
        var oldUrl = $(this).attr('src');
        var newUrl = $(this).data('rollover-src');
        $(this).attr('src',newUrl).data('rollover-src',oldUrl);
    });
});

/* the default styles for the document */
 body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 auto;
    padding: 20px;
    width: 190px;
    border: 3px solid blue;
}
h1, ul {
    margin: 0;
    padding: 0;
}
h1 {
    padding-bottom: .5em;
}
img {
    height: 175px;
}
/* the styles for the center content */
 section {
}
li {
    padding-right: 10px;
    display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
    	<h1>Image Rollovers</h1>

    <ul>
        <li>
            <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Favicon_250x250.png" alt="" 
                 data-rollover-src="https://upload.wikimedia.org/wikipedia/en/6/6b/LifestylePodnetwork-250x250.png">
        </li>
    </ul>
</section>

​