Question

我有一个应用程序，其中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中找到一个选项，然后只需用data-attribute将它附加到我的html元素。通过这种方式，前端人员可以添加快速html，而不需要脚本标记。

这是我到目前为止所做的事情，除了需要非字符串的选项（例如布尔值）之外，它实际上起作用并给出了适当的结果。

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

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

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

当然有人在那之前做过这类事情...... 提前致谢！

Answer 1

jQuery .data()函数会自动转换＆＃34; true＆＃34;到true。所以这应该有效：

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

data()也会自动转换整数，因此您也应该在此前面设置。

编辑以从OP添加注释：数据属性转换为驼峰大小写。因此，为了让data()生成一个名为showCancelButton的属性，您应该在元素上将其写为data-show-cancel-button。

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

1 个答案: