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

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中找到一个选项,然后能够简单地将它附加到我的html元素中data-attribute.这样前端人员就可以添加快速的html,而不需要脚本标签.

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

$('[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在元素上.