4

我有一个应用程序，其中 javascript 和 html 在很大程度上是分开的。我正在尝试使用 javascript 或 jquery 编写一些东西，它将从 html 元素中提取所有数据属性，并将它们动态地放入 javascript 函数的选项中。有很多选项，每次提到这个脚本，并不是都会用到。

首先是一个例子，然后我会展示我是如何做到的（半成功）。

HTML：

<button data-behavior="sweetalert" data-title="Alert Title" data-text="Lorem ipsum dolar..." data-showCancelButton="true">Click Me</button>

Javascript：

sweetAlert({
    title: "Alert Title",
    text: "Lorem ipsum dolar...",
    showCancelButton: true,
});

直线前进对吗？好的，现在让我们看中并动态填充它。所以我想要的是能够在 sweetAlert api 中找到一个选项，然后能够简单地将它附加到我的 html 元素上data-attribute。这样前端人员可以快速添加 html，而无需到处都是脚本标签。

这是我到目前为止所做的，实际上确实有效并给了我适当的结果，除了需要非字符串的选项（例如布尔值）。

$('[data-behavior="sweetalert"]').click(function() {
    attributes = $(this).data();
    delete attributes["behavior"];
    sweetAlert($.each(attributes, function(key, value) {
        key + ": " + value + ', '
    }));
});

所以这个函数可以正常工作并正确地提取标题和描述。但是，它不能正确地引入布尔选项。

有没有人知道如何改进这一点，以便我能够设置布尔选项（至少）和次要整数选项？

肯定有人以前做过这种事情……在此先感谢！

4

1 回答 1

5

jQuery.data()函数自动将 "true" 转换为true. 所以这应该工作：

$('[data-behavior="sweetalert"]').click(function() {
    attributes = $(this).data();
    delete attributes["behavior"];
    sweetAlert(attributes);
});

data()也会自动转换整数，所以你也应该在前面设置。

编辑以添加来自 OP 的注释：数据属性转换为驼峰式大小写。所以为了data()产生一个名为的属性，showCancelButton你应该把它写data-show-cancel-button在元素上。

于 2016-01-11T19:59:10.053 回答