使用jQuery同步任何数据属性

Question

我有一个全局数据持有者元素，如下所示：

<div class="data-holder" data-id="" data-type="" data-age=""></div>

(时间更长，但已经足够了(

现在，我想制作一个简短的函数，它将向其他元素的数据属性添加值。

因此，例如，如果用户单击具有data-type="381"的元素，则会将381添加到data-type属性中的全局"data-holder"元素中。(每个元素只有一个数据属性(data-type或data-age等等(

所以我找到了这个全局函数来删除元素中的所有属性：

$.each($(this).data(), function (key) {
// Because each key is in camelCase,
// we need to convert it to kabob-case and store it in attr.
var attr = 'data-' + key.replace(/([A-Z])/g, '-$1').toLowerCase(); 
// Remove the attribute.
$(this).removeAttr(attr);
});

我想如果我会这样使用它：

$.each($(this).data(), function (key) {
// Because each key is in camelCase,
// we need to convert it to kabob-case and store it in attr.
var attr = 'data-' + key.replace(/([A-Z])/g, '-$1').toLowerCase(); 
// Remove the attribute.
// $(this).removeAttr(attr);
alert($(this).attr(attr));    
});

我将获得当前元素的属性值。但我得到了"；未定义"；。

有什么想法吗？谢谢

Answer 1

首先，您找到的函数不会删除数据属性，但会更改属性的编写方式，这不是您想要的。

此外，我建议将ID"；数据持有者"；如果DIV是全局的，则将其转换为DIV而不是类。这将有助于确保您的页面中只有一个(这将更改$('#dataholder'(的示例(。

至于代码，以下是我的建议。我添加了一个适合DIV的点击事件，其中包含您想要点击更新的数据。dataholder.

示例DIV:

<div class="element-with-data" data-id="24124" data-type="something" data-age="25">

在jQuery中，

$('.element-with-data').on('click', function(evt){
var data = $(evt.target).data();
$.each(data, function (i) {
$('.data-holder').attr("data-" + i, data[i]);
});
}); 

(受此答案启发：https://stackoverflow.com/a/24059528/8452283.)