使用jQuery.data（）检索数据集

Question

我使用jQuery.data（）在第一次点击时将一些数据设置为div。在第二次点击时，当我尝试检索它时，它给了我'undefined'。知道我哪里错了吗？

请参阅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()期望将密钥作为其第一个参数

删除

div.removeData('testdata');

演示：Fiddle

---

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

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

演示：Fiddle

Answer 2

<强> JQuery的

$(document).ready(function () {    
    $(document).on('click', '#btn',function(){
        var thisObject=$(this);
        if(thisObject.hasClass("addplayer"))
        {
            $.data( thisObject[0], "testdata", {
                Name: "Ronaldo"
            });
            var dataName = $.data(thisObject[0], 'testdata').Name;
            console.log(dataName);
            thisObject.val('x').removeClass('addplayer').addClass('removeplayer');       
        }
        else
        {
            var dataName = $.data(thisObject[0], 'testdata').Name;
            console.log(dataName);
            $.removeData(thisObject[0], 'testdata');
            thisObject.val('+').removeClass('removeplayer').addClass('addplayer');  
        }  
    });
});

DEMO