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

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 的事件委托(delegate)方法:

$("#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-* 属性，这是在元素上存储任意数据时推荐的方法。

---

为什么要使用事件委托(delegate)？它更有效，因为它导致绑定(bind)到元素的事件处理程序更少。不是在每个 a.lesson 元素上都有一个，而是在 #ListContainer 元素上只有一个。

因为大多数 DOM 事件在树中向上冒泡，所以单击 #ListContainer 的后代将在 DOM 树中向上冒泡，最终到达 #ListContainer。 jQuery on 方法将在该元素处获取事件，并检查它是否源自与 .lesson 匹配的元素。如果是，它将执行事件处理程序。