jQuery 合并数据属性

Question

我试图在单击按钮时连接两个数据属性，我想知道如何将它们合并为一个而不是在第一个之前添加字符串，

HTML

<div id="parent">
    <button class="first" data-first='{"id":"1"}'>Test</button>
    <button class="second" data-second='{"action":"0"}'>Test</button>
</div>

当我单击带有.first 的按钮时，我想将data-first 与data-second 合并

jQuery

$('.parent').on('click', '.first', function() { 

    var old = $('.second').attr('data-object');

    var add = $(this).attr('data-object');

    $('.second').attr('data-object', add+old);

});

但这会返回

data-second="{"id":"1"}{"action":"0"}"

而我正在寻找的是

data-second="{"action":"0","id":"1"}"

任何帮助将不胜感激。

Answer 1

$('.second').data('object', $.extend({}, add, old));

http://api.jquery.com/jQuery.extend/

有一种方便的方法可以处理 jquery 中的data- 属性：http://api.jquery.com/data/

演示：http://jsfiddle.net/CqrwF/