OOP javascript と jQuery を学習する方法として、動的ドロップダウン メニューのスクリプトを作成しようとしています。www.industrialMerchants.com/industrialMerchantsでダミー サイトを確認できます。スクリプトは、www.industrialMerchants.com/industrialMerchants/javascript/horizontalDropMenu2.jsにあります。
このスクリプトは、最初にいくつかのオブジェクトを定義します。その後、$(document).ready()
関連する jQuery オブジェクトと DOM 要素をオブジェクト モデルにラップするプロセスを開始するように設計されたクロージャーを使用します。
問題は、ダミー Web サイトとして機能する静的 html ドキュメントをロードすると、Firebug が次のエラーを表示することです。
"TypeError: jqObject is undefined."
エラーは、次の関数の 5 行目を指しています。
function Menu(jqObject) {
self = this;
this.self = jqObject;
this.submenus = (function(){
jqObject.children().children("ul").each(function() { <<--- Error
submenu = new Submenu($(this), self);
submenus.push(submenu);
return submenus;
});
}());
}
関数を呼び出す行は次のとおりです。
$(document).ready(function(){
menus = new Array();
$("ul.horizontalDropMenu").each(function(){
menu = new Menu($(this));
menus.push(menu);
});
});
ご覧のとおり、Menu()
オブジェクト コンストラクターの呼び出しには引数として jQuery オブジェクトへの参照が含まれているため、jqObject
IS が明確に定義されています。それで、何が得られますか?
宣言で始まるコードにブレークポイントを挿入する$(document).ready()
と、実行はそれを完全にスキップし、関数宣言自体から開始します。あたかもブラウザが明示的な呼び出しが行われる前に関数宣言を実行しようとしているかのようです。