Question

这是我的代码：

<!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中时，它无效。我错过了什么？？？有什么帮助吗？

Answer 1

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

中

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

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

Answer 2

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

将代码包裹在document.ready中，或将代码放在引用的元素

之后

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

另外值得在文档中阅读How jQuery Works以获得更好的解释。

编辑 jsfiddle中的共振代码工作原因是左上角显示onLoad。当选择了

时，小提琴会自动将代码包装在加载处理程序中

Answer 3

你需要包装它：

 $( function(){ .....

 } );

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

Answer 4

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

Answer 5

这只是空闲脚本。

$(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/

Jquery Show和Hide不起作用？有些东西不见了，我无法弄清楚

5 个答案: