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的元素。如果是这样，它将执行事件处理程序。

Answer 2

更改此

onclick= "SaveData();"

到

onclick= "SaveData(this);"

然后将saveData功能更改为

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

或者甚至更好，你可以像@James一样使用$.on Allardice在答案中表示。

Answer 3

你正在混合旧世界的JavaScript和jQuery。

使用$("<a ...")创建元素，附加它然后附加一个.click处理程序，它可以在触发时使用$(this)。使用.data在添加.click处理程序可以使用的元素时向元素添加数据。

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

3 个答案: