带有前缀覆盖对象的 jQuery 数据属性答案

【问题标题】：jQuery Data Attribute with Prefix Override Object带有前缀覆盖对象的 jQuery 数据属性
【发布时间】：2013-02-12 22:48:10
【问题描述】：

我已经构建了自己的自定义 jQuery 插件，并且正在尝试使用 HTML 数据属性覆盖默认选项。我为每个添加了一个前缀（寻呼机），所以我的最终标记是：

<div class="pager" data-pager-page="1"></div>

现在说我有一个对象：

var options = { page: 0 };

我想通过以下方式覆盖选项：

var o = $.extend({}, options, $('.pager').data('pager'));

但是这不起作用。在做了一点调试后，我发现 $('.pager').data('pager') 返回未定义。如果我说：

$('.pager').data();

这将返回以下对象：

{ pagerPage: 1 }

我想我需要一些方法来将此对象转换为我需要的对象。请注意，我想添加许多选项，代码应该可以处理这个，而无需我处理每个单独的选项。

我相信其他人也遇到过这个问题，如果能提供任何帮助，我将不胜感激。谢谢

【问题讨论】：

我建议只收集可能的数据属性，然后遍历它们以查看定义了哪些属性并相应地处理它们。看看 jQuery Cycle2 是怎么做的，malsup 可能还想出了一些其他直观的处理方式。
谢谢，不过他们的网站目前似乎已关闭。
github 仍然在运行，github.com/malsup/cycle2
这就是你要找的东西：github.com/malsup/cycle2/blob/master/jquery.cycle2.core.js#L40
很好，谢谢，我看看能不能找到我需要的东西。

标签： jquery jquery-data

【解决方案1】：

如果有人感兴趣，下面的代码可以解决问题：

var data = $('.pager').data();

for (var p in data) {
    if (data.hasOwnProperty(p) && /^pager[A-Z]+/.test(p)) {
        var shortName = p[5].toLowerCase() + p.substr(6);
        data[shortName] = data[p];
    }
}

var o = $.extend({}, options, data);

注意：将 5 替换为前缀的长度，将 6 替换为长度 + 1。希望这会有所帮助。

感谢 Kevin 为我指明了正确的方向。

【讨论】：

感谢这个。我在网上搜索解决方案，但最终这似乎是唯一的一个。如果 jQuery 支持数据属性前缀就好了。

【解决方案2】：

<div id="test" data-key="xyz">helloooooo</div>

<script type="text/javascript">
var value = $("#test").data("key");
alert(value); //This will show you "xyz"
</script>

我认为它在 HTML4 和 HTML5 中是对的；

【讨论】：