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

我有一个应用程序,其中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元素.这样前端人员就可以添加快速的html,而不需要脚本标签.

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

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

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

有没有人知道如何改进这一点,以便我能够设置布尔选项(至少)和二次整数选项？

当然有人在那之前做过这种事情……提前谢谢！

解决方法:

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写在元素上.

标签：jquery,javascript,html,sweetalert
来源： https://codeday.me/bug/20190609/1201785.html