Question

我正在尝试将javascript对象存储在list元素中，这似乎工作正常，直到我尝试从另一个函数访问该数据。

这是我的jsfiddle：http://jsfiddle.net/RaUxB/2/

这是我的javascript：

var showData = function (li) {
    // get the stored data
    var d = $.data(li, 'testData');
    if (typeof(d) === 'undefined')
        alert ('showData() - data is undefined!');
    else
        alert ('showData() - number: [' + d.number+ '], text: [' + d.text + ']');
};

var doStuff = function () {
    $('#list').children().each(function(ix, item) {
        showData(item);
    });
};

$(document).ready(function() {
    // create a list item
    var li = $('<li>List Item 1 - Click Me!</li>').appendTo('#list');

    // store some data in it
    $.data(li, 'testData', {number:1, text:'test 1'});

    // show the data - this works!!!
    showData(li);

    // assign a click handler that will also show the data
    $(li).click(function() {
        showData(this); // this doesn't work!!!
    });
});

这是我的HTML：

<ul id="list"></ul>
<p><a href="#" onclick="javascript:doStuff();return(false);">Try This Way</a></p>

Answer 1

$.data采用原始对象，而不是表示DOM元素的jQuery对象。

调用$.data($(...))将数据与该jQuery对象包装器关联，而不是元素。

你应该使用$(...).data()，这将有效或者，将elem[0]传递给$.data()以在任何地方对原始DOM元素进行操作。

Answer 2

这是因为当您最初呼叫.showData(li)时， LI 是存储有.data()的那个。

尝试将此添加到您的.click()活动中：

您应该将数据存储到-this-元素。

$(li).click(function() {
    // store some data into THIS - now the correct .data will be stored
    $.data(this, 'testData', {number:1, text:'test 1'});
          // ^^

    showData(this); // this (now has data) and will work
});

jsFiddle Demo

jQuery - $ .data（） - 从另一个函数访问时数据丢失 - 返回undefined

2 个答案: