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

How to Dynamically populate options for javascript function

本文关键字：javascript 函数 选项 填充 何动态 动态      更新时间：2023-09-26

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

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

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 + ', '
    }));
});

因此，这个函数起作用，并正确地插入标题和描述。但是，它不能正确地引入布尔选项。

有人知道我如何改进这一点吗？这样我就可以设置布尔选项（至少），其次是整数选项？

肯定有人以前做过这种事提前谢谢！

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。

相关文章：