0

コミュニティ、

私は静的なjquery-mobileアプリを試しています。それが行うことは、その上に大きな静的リストがあることです<div data-role="page" id="page1">

アイテムがクリック/タップされるたびに<div data-role="page" id="page2">、スイッチケースの決定を使用して、対応する詳細を固定プレースホルダーに表示する必要があります。たとえば、<img>タグの可変SRCの詳細は均一です。

私の混乱は、どうすればこれを達成できますか? jQueryの#idセレクターは、この特定の目的を達成するために機能しますか? はいの場合、どのように進めればよいですか？そして、リスト項目の対応する詳細を検出して表示するのに役立つスニペットは何ですか。少しご指導お願いします

マイリストの構造:

<ul data-role="listview" data-inset="true" data-filter="true" data-theme="d" data-icon="false" data-filter-placeholder="Search" class="jqm-list" id="list">

<li id="A"><a href="#page2" data-ajax="false">A</a></li>
<li id="B"><a href="#page2" data-ajax="false">B</a></li>
<li id="C"><a href="#page2" data-ajax="false">C</a></li>
<li id="D"><a href="#page2" data-ajax="false">D</a></li>
</ul>

どこか間違っていたら訂正してください ありがとう

4

1 に答える 1

1

event.target は、イベントをトリガーした要素、または $(this) を提供します。たとえば、次のようなことができます

    $("li").click(function(event) {
       var clickedItemID = event.target.id;
      //your snipped to affect page 2 goes here ....
    });

ページに他に何があるかにもよりますが、明らかにすべてのliにアタッチするよりも、イベントをより適切にターゲットにしたいでしょう。

編集

イベントから受け取った ID を他の要素に追加することに基づいてコンテンツを変更できる場合は、switch/case ステートメントがなくても問題を解決できる可能性があります。たとえば、クリックしたときに他のページの画像を変更している場合は、次のようなものを使用できます

$("li").click(function(e) {

    var list_id = $(this).attr('id');
    $('#page2-image').attr('src', list_id + '.jpeg');

});

オプションを追加/削除するたびに関数を編集する必要がないため、このアプローチを回避できる場合は、スイッチ/ケースよりも優れています。ところで - 上記は大まかな例にすぎず、jquery モバイル ページ間のデータの受け渡しは考慮されていません。

代替案は次のようになります

$("li").click(function(e) {

    var list_id = $(this).attr('id');
    switch(list_id)
    {
        case "A":
            //execute code block 1
        break;
        case "B":
            //execute code block 2
        break;
        case "C":
            //execute code block 2
        break;
        case "D":
            //execute code block 2
        break;
        default:
            //code to be executed if case not covered above
     }

});

ご覧のとおり、さらに多くのコードが必要です。

グレン

于 2013-11-08T20:00:09.413 に答える