Question

有人可以告诉我我做错了什么吗？这就是我想出的：

＆＃13;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>Demo</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="Untitled-3.css" rel="stylesheet" type="text/css" />
</head>

<body>


<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.js"></script>

<script>
 $('.thumbs img').hover(function() {
    var url = $(this).attr('src');
    $('#main').attr('src', url);
});
</script>


<div class="thumbs">
    <img src="http://lorempixel.com/sports/200/400" width="50" height="50"/>
    <img src="http://lorempixel.com/city/200/400" width="50" height="50"/>
    <img src="http://lorempixel.com/people/200/400" width="50" height="50"/>
</div>

<div class="main-img">
    <img id="main" src="http://lorempixel.com/people/200/400"/>
</div>


</body>

</html>

＆＃13;

非常感谢，我显然对JQuery很新。

Answer 1

将它包装在dom ready事件中。否则，您的脚本将在呈现元素之前执行。

$(document).ready(function() {
    $('.thumbs img').hover(function() {
        var url = $(this).attr('src');
        $('#main').attr('src', url);
    });
});

Answer 2

使用ready。这将在您加载页面中的所有元素并callback事件绑定在ready hover内后img .thumb内运行您的代码。

指定在DOM完全加载时要执行的函数。

$(document).ready(function () {
    $('.thumbs img').hover(function () {
        var url = $(this).attr('src');
        $('#main').attr('src', url);
    });
});

Answer 3

您需要使用document-ready处理程序。目前，您的代码在加载DOM之前执行。其余代码可以使用。

指定在DOM完全加载时要执行的函数。

＆＃13;

$(function() {
  $('.thumbs img').hover(function() {
    var url = $(this).attr('src');
    $('#main').attr('src', url);
  });
});

＆＃13;

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.js"></script>


<div class="thumbs">
  <img src="http://lorempixel.com/sports/200/400" width="50" height="50" />
  <img src="http://lorempixel.com/city/200/400" width="50" height="50" />
  <img src="http://lorempixel.com/people/200/400" width="50" height="50" />
</div>

<div class="main-img">
  <img id="main" src="http://lorempixel.com/people/200/400" />
</div>

＆＃13;

Answer 4

尽管答案都有效，但我过去常常使用以下内容：

jQuery(function($) {
    // your code here.
});

~~我不太了解差异，我比这更简单ready。如果有人愿意在评论中提供更多信息，我会编辑我的答案。~~

此语法允许您使用也使用$作为标识符的其他JS库。将所有jQuery代码包装在内部，您将不会遇到与其他库的冲突。来自jQuery's API：

但是，传递给.ready（）方法的处理程序可以接受一个参数，该参数传递给全局jQuery对象。这意味着我们可以在.ready（）处理程序的上下文中重命名对象，而不会影响其他代码：

我不知道如何集成这个JQuery代码

4 个答案: