Question

我试图通过在jQuery中使用mouseover事件来替换img的src和id的img。但是我的控制台错误说$（...）为空。

是的，有人可以帮帮我吗？谢谢。

这是我的项目：

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。你试图循环遍历列表对象，当你真正想要做的就是遍历图像。

这是更新小提琴的链接：

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

我将如何做到这一点：

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

Answer 4

你有

listNode = $("image_rollovers");

应该是

listNode = $("#image_rollovers");

你错过了'＃'

我能说清楚，你的小提琴中缺少一个js文件：

 <script src="rollover.js"></script>

JS：图像翻转

4 个答案: