保存变量的选定数据以在另一页中使用

Question

我有一个动态填充的项目列表:

     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");
        }
    }

单击其中一个项目时,页面应导航到另一个包含此链接数据的页面.

我做了这个函数来保存链接中找到的值:

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

但它保存了"所有数据".我只想保存所选项目的数据.你有什么想法 ？谢谢.

Answer 1

它会保存所有数据,因为您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">

这使用HTML5 data-*属性,这是在元素上存储任意数据时的推荐方法.

为何使用事件委托？它更有效,因为它导致更少的事件处理程序绑定到元素.而不是每个a.lesson元素上的#ListContainer元素,元素上只有一个元素.

因为大多数DOM事件都会在树上冒泡,所以点击后代#ListContainer会在DOM树中冒泡,最终到达#ListContainer.jQuery on方法将在此元素处拾取事件,并检查它是否源自元素匹配.lesson.如果是这样,它将执行事件处理程序.