jquery - 使用 jQuery.data() 检索数据集

Question

我在第一次单击时使用 jQuery.data() 将一些数据设置为 div。在第二次单击时，当我尝试检索它时，它给了我“未定义”。知道我哪里错了吗？

请参阅jsFiddle

<div class="player forward playerposition">
    <input type="button" class="addplayer addforward" value="+" />
</div>

$(document).ready(function () {
    $(document).on('click', '.addplayer', storeData);
    $(document).on('click', '.removeplayer', deletedata);
});

function storeData() {
    var div = $(this);
    $.data(div, 'testdata', {
        'Name': 'Ronaldo'
    });
    var data = $.data(div, 'testdata');
    console.log(data);
    div.val('x');
    div.removeClass('addplayer');
    div.addClass('removeplayer');
}

function deletedata() {
    var div = $(this);
    var data = $.data(div, 'testdata');
    console.log(data);
    div.removeData(div, 'testdata');
    div.val('+');
    div.removeClass('removeplayer');
    div.addClass('addplayer');
}

Answer 1

jQuery.data() api 期望 dom 元素作为其第一个参数，而不是 jQuery 对象

var data = $.data(this, 'testdata');

还有removeData()期望将 key 作为其第一个参数删除

div.removeData('testdata');

演示:Fiddle

<小时/>

另一种方法是使用 .data() jQuery 对象的方法如

div.data('testdata', {
    'Name': 'Ronaldo'
});
var data = div.data('testdata');

演示:Fiddle