如何动态填充 javascript 函数的选项

Question

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

先举个例子，然后再展示我是怎么做的（semi-successfully）。

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 中找到一个选项，然后能够简单地将它附加到我的带有 data-attribute 的 html 元素。这样前端人员可以快速添加 html，而无需到处都是脚本标签。

这是我到目前为止所做的，它确实有效并为我提供了适当的结果，除了需要 non-strings 的选项（例如布尔值）。

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

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

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

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

Answer 1

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。

如何动态填充 javascript 函数的选项

How to Dynamically populate options for javascript function

html

javascript

jquery

sweetalert