javascript - 将 HTML 数据属性中的值提取到 jQuery 插件选项数组中

Question

许多 jQuery 插件都有一个选项数组，允许您指定某些设置。

是否可以直接将函数写入插件选项数组以添加来自 HTML 数据属性的值？或为此提取任何 HTML 内容？

例子:

以下为Circliful插件，它根据您在 percent: 中指定的百分比值创建一个简单的圆形图表，这显然需要一个整数..但我想做的是从 DOM 中提取一个值并将其添加为百分比值。

我曾多次想这样做，但最终总能找到解决方法，如果能知道是否可行，那就太好了。

$(document).ready(function() {
    $("#your-circle").circliful({
        animationStep: 5,
        foregroundBorderWidth: 5,
        backgroundBorderWidth: 15,
        percent: 50 //get value of a data attribute and put it here
    });
});

Answer 1

从插件文档来看，您似乎默认使用 data-percent 属性执行此操作

参见:https://github.com/pguso/jquery-plugin-circliful#data-attributes

或者您可以创建一个全局变量并将值传递给属性:

$( document ).ready(function() {
        var percent = $("#your-circle").attr('data-percent');
        $("#your-circle").circliful({
        animationStep: 5,
        foregroundBorderWidth: 5,
        backgroundBorderWidth: 15,
        percent: percent //get value of a data attribute and put it here
});
});

(注意:数据属性似乎只适用于较早版本的插件)