Question

我已经被困了六个小时以上。

我的最终目标是一个交互式的Tic-Tac-Toe网页游戏，但我试图通过使用一个简单的JQuery fadeout功能测试JavaScript，一旦用户点击它就会摆脱第一个面板。< / p>

<!DOCTYPE html>
<html>

<head>

    <link href="Style.css" rel="stylesheet" type="text/css" />

    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

    <script src="Clicky.js" type="text/javascript src="Clicky.js"></script>


</head>

<body>

    <h1>
        <table>

        <!-- This is a table of independently defined background panels arranged in a 3x3 table -->
            <tr><td><div id = "panel1" class="backgroundPanel">&nbsp;</div></td><td><div id = "panel2" class="backgroundPanel">&nbsp;</div></td><td><div id = "panel3" class="backgroundPanel">&nbsp;</div></td></tr>
            <tr><td><div id = "panel4" class="backgroundPanel">&nbsp;</div></td><td><div id = "panel5" class="backgroundPanel">&nbsp;</div></td><td><div id = "panel6" class="backgroundPanel">&nbsp;</div></td></tr>
            <tr><td><div id = "panel7" class="backgroundPanel">&nbsp;</div></td><td><div id = "panel8" class="backgroundPanel">&nbsp;</div></td><td><div id = "panel9" class="backgroundPanel">&nbsp;</div></td></tr>

        </table>

    </h1>


</body>


</html>

这是html代码。该表有助于在3x3网格中排列不同的面板，其他面板现在只是占位符，直到我知道JavaScript正在运行。结果中唯一的一个是panel1。

$(document).ready(function () {
    $("#panel1").click(function () {
        $(this).fadeout();
    });
});

这是我实施的所有JavaScript代码。

我一直在根据多个来源进行轻微修改，但JavaScript仍无效。当我使用Chrome的f12叠加层时，它显示在脚本下，但没有执行任何操作任何帮助将不胜感激。

Answer 1

这看起来很时髦，你把js文件的来源包括两次，而你错过了一个可能会占用页面其余部分的引用。

 <script src="Clicky.js" type="text/javascript src="Clicky.js">  </script>

试

 <script src="Clicky.js"></script>

您可以通过添加

确认正确导入

console.log("test")

在你的js文件中并检查开发者控制台。

Answer 2

如果您查看浏览器的控制台，您应该会看到一条错误消息，其中包含以下内容：

TypeError：$（...）。fadeout不是函数

JavaScript区分大小写，您尝试使用的jQuery方法名为fadeOut（大写O），而不是fadeout。

Javascript没有正确调用？

2 个答案: