Question

我正在关注一个在线jQuery教程，我无法让这个标记在jsfiddle中工作：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
function ShowBox()
{
        $("#divTestArea1").fadeIn();
}
</script>
</head>

<div id="divTestArea1" style="padding: 50px; background-color: #89BC38; text-align: center; display: none;">
        <b>Hello, world!</b>
</div>

<a href="javascript:void(0);" onclick="ShowBox();">Show box</a>

</html>

以下是无效的jsfiddle版本：fadeIn test fiddle

单击超链接时应触发onclick事件，该超链接应调用ShowBox函数。 ShowBox应该“fadeIn（）”display：none div，id #divTestArea1。我究竟做错了什么？

谢谢！

Answer 1

将它包装成这样的工作后：

<script type="text/javascript">
function ShowBox()
{
        $("#divTestArea1").fadeIn();
}
</script>

WORKING FIDDLE

Answer 2

您的jsfiddle无法正常工作，因为您可以选择说明如何错误地加载您的javascript库。设置为＆＃34;没有换行＆＃34;这样你的函数就会在加载html之前定义。

您不必更改任何代码

http://jsfiddle.net/H72NG/5/

function ShowBox()
{
        $("#divTestArea1").fadeIn();
}

Anchor tag的onclick没有在jsfiddle中执行简单的jQuery函数

2 个答案: