2

这是我的代码：

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">     
$(".social").hover(function() {
        $("h1", this).hide();
        $(".networks", this).fadeIn();
    }, function() {
        $(".networks", this).hide();
        $("h1", this).fadeIn();
    });
</script>

<style>
.networks {
    display:none;
}
</style>
</head>

<body>
<div class="social">
    <h1>Share this</h1>
    <div class="networks">
        <p>Twitter</p>
        <p>Facebook</p>
    </div>
</div>      

</body>
</html>

当我在http://jsfiddle.net/ppksR/中尝试它时，它确实有效，但是当我将它复制粘贴到我的 Dreamweaver 中时，它不起作用。我错过了什么？？？有什么帮助吗？

4

5 回答 5

1

jsfiddle 将 JavaScript 代码包装在 中onLoad，您应该这样做。将脚本内容包装在：

$(function () {
    // your code
});

要让 jsfiddle 模拟您正在做的事情，onLoad请将No wrap - in <head>

于 2013-03-04T00:55:18.533 回答
0

您的问题是基本的 jQuery 101 ......当您的代码触发时，这些元素不存在。

将代码包装在 中document.ready，或将代码放在它所引用的元素之后

API 参考：http ://api.jquery.com/ready/

还值得阅读文档中的jQuery 工作原理以获得更好的解释。

编辑在 jsfiddle 中工作的共振代码是由于左上角的下拉菜单显示onLoad。选择时，小提琴会自动将代码包装在负载处理程序中

于 2013-03-04T00:55:47.280 回答
0

你需要包装它：

 $( function(){ .....

 } );

这将确保在浏览器读取所有 HTML 之前代码不会执行。目前，您在定义任何元素之前执行代码.social。

于 2013-03-04T00:56:05.080 回答
0

您是否在本地使用其他编辑器/浏览器尝试过该代码？也许 DW 没有正确加载 jQuery。您是否将代码粘贴到纯文本文件并在浏览器中测试页面？

于 2013-03-04T00:57:23.013 回答
0

那只是空闲的脚本。

$(document).ready(function(e) {
 $(".social").hover(function() {
    $("h1", this).hide();
    $(".networks", this).fadeIn();
    }, function() {
    $(".networks", this).hide();
    $("h1", this).fadeIn();
    });
});

此$(document).ready(function(e) {行使其通过脚本启动 onLoad。

这就是你的代码所做的。http://jsfiddle.net/3SKqQ/

于 2013-03-04T01:04:07.117 回答