javascript - 如何获取 data-attr 中存在的现有 JSON 并更新它

Question

在给定的 fiddle 中，单击“插件”按钮以及选择和取消选择复选框，我正在尝试更新数据属性数组作为 data-stuff 出现。

一旦我设置了数据，我如何获取现有数据并用新数据更新它。 http://jsfiddle.net/kgm9o693/9/

// checkbox checked
$(document).on('click', '.ui-checkbox-off', function (event) {
    var vendoritemsdata = $(".lastItm_Wrap").data('stuff');
    var checkboxid = $(this).next().attr("id");
    var cost = $(this).attr("cost");
    var toppcrusts = [];
    toppcrusts.push({
        'name': checkboxid,
            'cost': cost
    });
    if (vendoritemsdata.length == 0) {
        $('.lastItm_Wrap').attr('data-stuff', toppcrusts);
    } 
    else {
        var existingdata = $('.lastItm_Wrap').data('data-stuff');
    }
});

您能告诉我如何解决这个问题吗？

Answer 1

您正在尝试将 DOM 用作变量。应该是相反的。仅使用 DOM 来显示结果(在您的情况下为总成本)。但在此之前，如果您需要将数组作为 json 或 data-stuff，请将其序列化为数组。

检查此 http://api.jquery.com/serializeArray/ 底部的示例

如果您想继续按照自己的方式进行操作，请将数据转换为 JSON 并使用:

设置数据

$('.lastItm_Wrap').attr('data-stuff', JSON.stringify(toppcrusts) );

获取数据

var existingdata = JSON.parse( $('.lastItm_Wrap').attr('data-stuff') );

http://jsfiddle.net/kgm9o693/12/