0

-=-このコード機能。非機能/機能の間で何も変更されていないため、キャッシュに問題があったと推測します。助けてくれてありがとう（特にボールを転がしてjquery構文のより深い理解を形成するのを手伝ってくれたNiko）-=-

私はこのスクリプトを手作業で作成しましたが、それに慣れるために最終的にjqueryに更新し、コードを合理化することにしました。これは、単純なメニューをレンダリングすることになっています（以前はそうしました）。

  • 両方の.jsファイルは.htmlファイルと同じディレクトリにあります。これは、サーバーではなく、私のPCでテストされています。
  • このコードの以前のバージョンは、taskMaster.jsにリンクするだけで完全に機能しました。その時点で、私のコードは「$」タグ付き呼び出しを使用していませんでした。
  • Firebugが呼び出そうとすると、「ReferenceError：$isnotdefined」というエラーが表示されます$(document).ready(function () {
  • [ネット]タブには、ロードされている.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 に答える