0

-=- 此代码功能。我只能假设缓存存在问题，因为在非功能/功能之间没有任何改变。谢谢大家的帮助（尤其是 Niko，他帮助我对 jquery 语法有了更丰富的理解）-=-

我手工编写了这个脚本，最后决定将它更新为 jquery 以适应它，并简化代码。这应该呈现一个简单的菜单（它以前做过）。

  • 两个 .js 文件与 .html 文件位于同一目录中。这是在我的电脑上测试的，而不是在服务器上。
  • 此代码的先前版本完美运行，只是链接到 taskMaster.js。那时我的代码没有使用“$”标记的调用。
  • Firebug 在尝试调用时显示错误“ReferenceError: $ is not defined”$(document).ready(function () {
  • “net”选项卡不显示正在加载的任何 .js 文件；网络选项卡完全为空并且没有显示任何活动 - 我相信这是因为我正在我的 PC 上测试它；加载功能代码时网络面板为空
  • 我已经重新安装了新版本的 jquery，因为出现了问题，但无济于事

损坏的代码“taskMaster.js”：

$(document).ready(function () {


//main menu
function Main()
{
    var mainList = ["New List","Show Lists","Delete Lists"];
    //var onClick = [New,Lists,Delete];
    var mainMenu = new Menu("Main Menu","menuMain",mainList/*,null*/);
    mainMenu.contentMenu();
}
$(Main);


//menu class
function Menu(name,divClass,content/*,onclick*/)
{
    $("#interface").html(null);

    //title
    formatDiv("interface",name,divClass,name/*,null*/);

    //return
    if(name != "Main Menu")
    {
        formatDiv(name,null,"return","^ Main Menu","Main()");
    }


    //display options
    this.contentMenu = function()
    {
        for(i=0; i<content.length; i++)
        {
            formatDiv("interface",content+i,"menuContent",content[i]/*,onclick[i]*/);
        }
    }
}


//format divs
function formatDiv(target,divId,divClass,content/*,onclick*/)
{
    $("#"+target).append("<div id=\'" + divId + "\' class=\'" + divClass + "\'>" + content +"</div>");
    /*$("#"+divId).click(function()
    {
        onclick;
    });*/
}

});

我注释掉了未使用的行，但它显示“$”为未定义

这是HTML：

<html>
<head>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="taskMaster.js"></script>
    <link rel="stylesheet" type="text/css" href="taskMaster.css" />
</head>
    <body>
        <div id="interface">
        </div>
    </body>
</html>

据我所知，这个 html 没有任何问题 - 相同的格式之前工作得非常好。所改变的只是我引入了 jquery 并将 taskMaster.js 中的一些命令更改为使用“$”。

4

1 回答 1

3

好的，我现在将其发布为答案，因为在这里提供一些示例更容易。

第一件事是：每当您执行访问 DOM 的操作时，例如$("#interface").html(null);，您首先需要确保 DOM 已准备好。这就是“就绪”事件的用途：

$(document).ready(function() {
    /* The code here is executed when the DOM is ready! */
});

因此，如果“Main()”是一个启动一切的函数，你可以简单地列出它在 DOM 准备好时调用：

function Main() {
    /* ... */
}

$(document).ready(Main);

大多数时候，将整个 JavaScript 代码封装在“就绪”事件处理程序中也是安全的：

$(document).ready(function() {
    function Main() { /* ... */ }
    function formatDiv(...) { }
    // ...

    // All functions are defined, now let's go:
    Main();
});

现在点击处理程序：jQuery 的“click()”函数需要一个函数，当相应的 DOM 元素被点击时调用该函数。您当前正在向其传递诸如“New()”之类的字符串，但您应该直接传递函数。为此，请以这种方式更改“Main()”中的代码：

// Old: var onClick = ["New()","Lists()","Delete()"];
var onClick = [New, Lists, Delete]; // New

这会将实际函数添加到数组中，而不仅仅是它们的名称。

于 2012-07-22T17:00:42.853 回答