Question

我收到了这段代码：

<!DOCTYPE html>

<head>
<title>bla</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-git2.js'></script>
</head>

<body>
<script language="javascript" type="text/javascript">
    $("#left").children(".thumb").on({
        mouseenter: function () {
            $("#preview").attr("src", $(this).attr("src")).show();
        },
        mouseleave: function () {
            $("#preview").hide();
        }
    });
</script>

<div id="left">
    <img src="http://sereedmedia.com/srmwp/wp-content/uploads/kitten.jpg" class="thumb" />
    <img src="http://www.warrenphotographic.co.uk/photography/bigs/36522-Tabby-kitten-white-background.jpg" class="thumb" />
    <img src="http://www.warrenphotographic.co.uk/photography/bigs/11406-Ginger-kitten-rolling-on-its-back-white-background.jpg" class="thumb" />
    <img id="preview" />
</div>
</body>

和CSS：

#preview 
{
    background:#333;
    border: solid 1px #000;
    display: none;
    color: #fff;
    width: 200px;
}

所有这些来自：http://jsfiddle.net/chrissp26/sd3ouo9g/但是我不像那里那样工作，可能是什么问题？

Answer 1

尝试将其放入$(document).ready这样的内容：

$(document).ready(function() {
    $("#left").children(".thumb").on({
        mouseenter: function () {
            $("#preview").attr("src", $(this).attr("src")).show();
        },
        mouseleave: function () {
            $("#preview").hide();
        }
    });
});

Answer 2

在页面完全加载之前，您正在引用DOM元素。代码在您引用的JSFiddle中工作的唯一原因是他们选择了onLoad选项：

enter image description here

正如Yourness建议的那样，使用DOM就绪处理程序（JSFiddle onLoad为你做的那样）。

$(document).ready(function(){...});的快捷方式是：

`$(function(){...});`

<script language="javascript" type="text/javascript">
    $(function(){
        $("#left").children(".thumb").on({
            mouseenter: function () {
                $("#preview").attr("src", $(this).attr("src")).show();
            },
            mouseleave: function () {
                $("#preview").hide();
            }
        });
    });
</script>

或者更健壮的版本（同时定义本地$）：

`jQuery(function($){...});`

<script language="javascript" type="text/javascript">
    jQuery(function($){
        $("#left").children(".thumb").on({
            mouseenter: function () {
                $("#preview").attr("src", $(this).attr("src")).show();
            },
            mouseleave: function () {
                $("#preview").hide();
            }
        });
    });
</script>

选项3：

或者您可以将现有的<script>块放在body元素的底部（在它引用的元素之后）。

<body>
    <div id="left">
        <img src="http://sereedmedia.com/srmwp/wp-content/uploads/kitten.jpg" class="thumb" />
        <img src="http://www.warrenphotographic.co.uk/photography/bigs/36522-Tabby-kitten-white-background.jpg" class="thumb" />
        <img src="http://www.warrenphotographic.co.uk/photography/bigs/11406-Ginger-kitten-rolling-on-its-back-white-background.jpg" class="thumb" />
        <img id="preview" />
    </div>
    <script language="javascript" type="text/javascript">
        $("#left").children(".thumb").on({
            mouseenter: function() {
                $("#preview").attr("src", $(this).attr("src")).show();
            },
            mouseleave: function() {
                $("#preview").hide();
            }
        });
    </script>
</body>

Javascript不能仅仅由我工作

2 个答案:

`$(function(){...});`

`jQuery(function($){...});`

选项3：