0

各アイテムが特定の機能を実行する Off Canvas メニューを備えた小さな Web アプリを作成しています。Google で調査したところ、jQuery の.on("click", ...方が attr よりも優れていることがわかりonclick("myFunction()")ました。この関数は、HTML ファイルからの静的データ (非表示の div に「保存」) と ajax を使用した動的データ (JSON) をビューポートの div に読み込みます。

ここに私の質問があります。このようなことを達成するための解決策がたくさんあることは知っていますが、これは「適切で効率的な」方法ですか? ばかげた質問かもしれませんが、私は学習の途中です :) どうもありがとうございました!

HTML

<ul>
    <li><a class="home" href="#">Home</a></li>
    <li><a class="credits" href="#">Credits</a></li>
</ul>

JavaScript (静的データ用)

$(".sidebar a").on("click", function(ev) {
    // get class from clicked menu item
    var sidebar_class = $(this).attr("class");

    // load static data from hidden div into .container
    // e.g. .credits would load .page-credits
    $(".container").html($(".page-"+sidebar_class).html());

    // hide sidebar again
    hideSidebar();
});
4

2 に答える 2

1

投稿したコードに問題はありません。他の有効な代替手段は次のとおりです。

$(".sidebar a").click(function() { //you don't ned the ev and you can use the click() method that is the same of on("click"

$(".sidebar").on("click", "a", function() { //you have a single delegate listener for all as instead of one listener for each one.
于 2013-06-19T09:18:25.110 に答える
0

動的データ (ところで静的データで動作します) の場合は、委譲を使用します。

$(document).on("click",".sidebar a", function(ev) {
    // get class from clicked menu item
    var sidebar_class = $(this).attr("class");

    // load static data from hidden div into .container
    // e.g. .credits would load .page-credits
    $(".container").html($(".page-"+sidebar_class).html());

    // hide sidebar again
    hideSidebar();
});

ここではドキュメントを使用しますが、動的コンテンツの最も近い静的コンテナーを使用する必要があります。

于 2013-06-19T09:16:14.487 に答える