使用jQuery同步任何数据属性

问题描述

我有一个像这样的全局数据持有者元素：

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

（虽然更长，但足以理解这个想法）

现在我想做一个简短的函数，它将其他元素的值添加到那些数据属性中。

例如，如果用户单击带有data-type="381"的元素，则会将381添加到"data-holder"属性中的全局data-type元素中。（每个元素只有一个数据属性（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(),'-$1').toLowerCase(); 
    // Remove the attribute.
    // $(this).removeAttr(attr);
    alert($(this).attr(attr));    
});

我将获得当前元素的属性值。但我得到的是“未定义”。

有什么想法吗？谢谢！

解决方法

首先，您发现的功能不会删除数据属性，而是会更改属性的写入方式，这不是您要查找的内容。

此外，我建议将ID“数据持有者”放入DIV而不是类中（如果它是全局的）。这将有助于确保您的页面上只有一个（这将更改$（'＃data-holder'）的示例）。

对于代码，这是我的建议。我添加了一个适用于DIV的click事件，其中包含您要单击以更新.data-holder的数据。

示例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.）

custom-data-attribute jquery