Question

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

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

现在说我有一个对象：

var options = { page: 0 };

我想通过说出以下内容来覆盖选项：

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

然而，这不起作用。在进行调试后，我发现$（'。pager'）。data（'pager'）返回undefined。如果我说：

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

返回以下对象：

{ pagerPage: 1 }

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

我确信其他人遇到了这个问题，我会感激任何帮助。感谢

Answer 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.希望这会有所帮助。

感谢凯文指出我正确的方向。

Answer 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中是真的;

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

2 个答案: