Question

我是jQuery的新手，我正在浏览一组视频教程。今天是第一个，我做了我在视频中被告知的所有内容，但它不起作用。第一个教程即将淡出一个简单的标签。我用CSS和脚本标签编写了以下代码。

<html>
<head>
    <title>Hi</title>
    <script src = "http://www.myvirtualhost.lcl:8080/jquery/jquery-1.7.1.min.js" type= "text/javascript"></script>
</head>
<style type = "text/css">
    #box
    {
    background: red;
    width: 300px;
    height: 300px;
    }
</style> 

<script type="text/javascript">
    $(function(){
    $('a').click(function(){
        alert("hi");
        $('#box').fadeOut();
        )};
    });
</script>
<body>
    <div id="box"></div>
    <a href="#">Click Me !</a>
</body>

任何人都可以告诉我我做错了什么，为什么它不起作用？

Answer 1

)};应为});，因为您需要在关闭click(参数列表之前先关闭匿名功能块。

顺便说一句，你应该正确地缩进你的代码：

$(function(){
    $('a').click(function(){
        alert("hi");
        $('#box').fadeOut();
    });
});

此外，打开firebug调试器/控制台是一个好主意 - 然后您很快就会看到任何错误，例如代码中的解析错误。

Answer 2

您遇到语法错误：

$('a').click(function(){
    alert("hi");
    $('#box').fadeOut();
    )};

应该是：

$('a').click(function(){
    alert("hi");
    $('#box').fadeOut();
    });

如果您使用的是Firefox，我建议您安装FireBug，这是一个开发人员。允许您调试javascript / css / html的工具。

Answer 3

JavaScript代码中存在语法错误：

    $('#box').fadeOut();
    )};

应该是：

    $('#box').fadeOut();
    });

此处的工作结果为：http://jsfiddle.net/GTCfR/

（顺便说一下，你很可能会欣赏JSFiddle，因为它非常适合做这样的简单测试并学习基础知识。）

Answer 4

您的<style>和<script>标记需要放在文档的头部或正文中。两者之间的下层地区不存在任何东西。

正如其他人所指出的，这里也存在语法错误：

)};

应该是

});

您可能希望考虑安装适用于Firefox的Firebug或使用Chrome开发人员工具。它们每个都包含一个Javascript控制台，可以显示Javascript错误。

Answer 5

您的行语法错误

$(function(){
    $('a').click(function(){
        alert("hi");
        $('#box').fadeOut();
        )}; <------------ Error here. It must be });
    });

然后它会起作用！

Demo

Answer 6

几乎完美！但是，在下面的代码中，你有了}};混合。仔细查看代码的.fadeOut();部分。

 $(function(){
    $('a').click(function(){
    alert("hi");
    $('#box').fadeOut();
    )}; <!-- This needs swapped, to look like });-->
}); <!-- this one -->

Answer 7

$('a').click(function(){
    alert("hi");
    $('#box').fadeOut();
    return false;///add this line
    }); // and change this line

也许您可以将其添加到您的点击操作

jQuery教程 - 代码不工作？

7 个答案: