1

動的に入力されるアイテムのリストがあります。

     function ViewData(data) {
        var SI = (typeof data) == 'string' ? eval('(' + data + ')') : data;
        $('#ListContainer').empty();
        for (var i = 0; i < SI.length; i++) {
            var text = '<a href="Page.htm" rel="external" onclick= "SaveData();"
                         class="lesson" LessonID="' + SI[i].lessonID 
                         '"><span class="lesson_subject">' + SI[i].sbj_Name + 
                         '</span></b></a>
            $('#ListContainer').append(text).trigger("create");
        }
    }

それらの1つの項目をクリックすると、ページはこのリンクのデータを含む別のページに移動する必要があります。

リンクで見つかったの値を保存するためにこの関数を作成しました：

function SaveData() {
        localStorage["LessonID"] = $('#ListContainer').find('.lesson').attr('LessonID'); 
        localStorage["SubjectName"] = $('#ListContainer').find('.lesson_subject').text();
        }

ただし、「すべてのデータ」は保存されます。選択したアイテムのデータのみを保存したい。あなたはなにか考えはありますか ？ありがとう。

4

3 に答える 3

5

find('.lesson')内のすべてのリンクが見つかるため、すべてのデータが保存されます#ListContainer。インライン イベント ハンドラを削除し、次のonメソッドでイベント委任を利用することをお勧めします。

$("#ListContainer").on("click", ".lesson", function() {
    localStorage["LessonID"] = $(this).data("lessonid");
    localStorage["SubjectName"] = $(this).data("subject");
});

dataの代わりに メソッドを使用したことに注意してくださいattr。これには、マークアップに別の変更が必要になります。

<a href="Page.htm" rel="external" class="lesson" data-lessonid="someID" data-subject="someSubject">

data-*これは、要素に任意のデータを格納する場合に推奨されるアプローチであるHTML5属性を使用します。

イベント委任を使用する理由 要素にバインドされるイベント ハンドラーが少なくなるため、より効率的です。すべてa.lessonの要素に 1 つではなく、#ListContainer要素に 1 つだけあります。

ほとんどの DOM イベントはツリーをバブルアップするため、 の子孫をクリックする#ListContainerと DOM ツリーをバブルアップし、最終的に に到達し#ListContainerます。jQueryonメソッドは、この要素でイベントを取得し、一致する要素で発生したかどうかを確認します.lesson。その場合、イベント ハンドラーが実行されます。

于 2012-06-12T08:04:54.340 に答える
3

これを変える

onclick= "SaveData();"

に

onclick= "SaveData(this);"

次に、saveData関数を次のように変更します

function SaveData(elem) {
        localStorage["LessonID"] = $(elem).attr('LessonID'); 
        localStorage["SubjectName"] = $(elem).find('.lesson_subject').text();
        }

またはさらに良いことに、$.on@James Allardiceが彼の回答で示したように使用できます。

于 2012-06-12T08:06:28.823 に答える
1

古い世界の JavaScript と jQuery を混在させています。

を使用$("<a ...")して要素を作成し、追加してから、起動時に使用できる .click ハンドラーをアタッチし$(this)ます。.click ハンドラーが利用できる要素を追加するときに、.data を使用して要素にデータを追加します。

于 2012-06-12T08:05:41.023 に答える