Question

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

是否可以直接在plugins选项数组中编写函数来从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
});
});

（注意：似乎数据属性仅适用于插件的早期版本）

Answer 2

您始终可以从DOM中读取元素数据。它的类型是字符串，因此可能需要一些解析。您可能需要事先以某种方式保存它，但如果您在$( document ).ready(function( //scripts ))中加载脚本，它应该可以正常工作。

<div id='element' data-abc='def'></div>


percent: $('#element').data('abc')

Answer 3

你试过了吗？

<div id="your-circle" data-percent="50"></div>

$("#your-circle").circliful({
    animationStep: 5,
    foregroundBorderWidth: 5,
    backgroundBorderWidth: 15,
    percent: parseInt($(this).attr('data-percent'),10)
});

将HTML数据属性中的值拉入jQuery插件选项数组

3 个答案: