如何解决使用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.)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。