0

私はUnobtrusive JavaScriptを調べており、JavaScript を HTML から分離する必要があることを示唆しています。

私のページでは、 with を使用jQuery 1.9.1していjQuery Migrate plugin 1.1.1ます。<li>私は自分のページのメニューをシミュレートするために使用します。それぞれ<li>のメニュー項目です。もともと私は次のようにJavaScriptを割り当てました：

    <ul>
        <li onclick="showQ('0001')">Q 1</li>
        <li onclick="showQ('0002')">Q 2</li>
        <li onclick="showQ('0003')">Q 3</li>
        <li onclick="showQ('0004')">Q 4</li>
    </ul>

第 1 の質問: Unobtrusive JavaScript に対応して変換するにはどうすればよいですか?

JavaScript 関数は次のとおりです。

function showQ(id) {
  $('#' + id).show();
}

2 番目の質問: (おそらく jQuery の質問です) どのように関数が元の を参照できますか?<li>たとえば、 を介してクラスを追加するには.addClass('some_css_class');?

4

2 に答える 2

1

idそれぞれの を変更し<li>て、関数に渡したい ID を含めshowQます。<li>ドキュメント準備ハンドラーで要素にクリック ハンドラーを割り当て、showQそこから関数を呼び出し、 clicked から抽出された id を渡します<li>。クリック ハンドラーで、クラスを追加するためにクリックされた<li>使用を参照します。$(this)

html

<ul>
    <li id="i0001">Q 1</li>
    <li id="i0002">Q 2</li>
    <li id="i0003">Q 3</li>
    <li id="i0004">Q 4</li>
</ul>

JavaScript

function showQ(id) {
  $('#' + id).show();
}

$(document).ready(function() {
    $("ul li").click(function() {
        var id = $(this).attr("id").substring(1);
        showQ(id);

        $(this).addClass("some_css_clas");
    });
});

例

于 2013-03-21T09:00:22.277 に答える
0

HTML:

<ul>
    <li>Q 1</li>
    <li>Q 2</li>
    <li>Q 3</li>
    <li>Q 4</li>
</ul>

JS スニペット:

$(document).ready(function(){


$('ul li').click(function(){


$(this).addClass('some_css_class');

});

});

EDIT： あなたの関数コードで：

function showQ(id) {
  $('#' + id).show();
}

idあなたはどれを見せたいですか？liが表示されていない場合id、どうすればそれをクリックできますか?

于 2013-03-21T09:12:51.077 に答える