在具有相同类的多个 div 上启动 ProgressBar

Question

我正在尝试在具有同一类 form-progress 的多个 div 上使用 ProgressBar.js Plugin

我的html代码是，

<div class="form-progress"></div>

而javascript代码是，

    var form_progress = new ProgressBar.Circle('.form-progress', {
        color: '#475365',
        trailColor: '#CDD0D6',
        strokeWidth: 4,
        trailWidth: 2,
        easing: 'easeInOut',
        duration: 1400,
        text: {
            autoStyleContainer: false
        },
        from: {color: '#196ABC', width: 4},
        to: {color: '#196ABC', width: 4},
        // Set default step function for all animate calls
        step: function (state, form_progress) {
            form_progress.path.setAttribute('stroke', state.color);
            form_progress.path.setAttribute('stroke-width', state.width);

            var value = Math.round(form_progress.value() * 100);
            if (value === 0) {
                form_progress.setText('');
            } else {
                form_progress.setText(value + "%");
            }

        }
    });
    form_progress.animate(0.16);

但它只在头等舱 form-progress 上启动，而不是其他人。

这有什么问题？

Answer 1

您需要为您需要的每个实例调用ProgressBar.Circle 构造函数。

目前你的代码：

var form_progress = new ProgressBar.Circle('.form-progress', {
    ....
});

... 仅调用构造函数（插件）的一个实例。即使您在new ProgressBar.Circle 之后指定类名.form-progress，插件也只会找到该元素的第一个实例，而不是全部。

简要查看ProgressBar API 的文档，似乎没有办法引用类名.form-progress 的所有实例。

您可以尝试如下修改您的JavaScript 代码：

// This will hold all the final instances of the plugin: ProgressBar.Circle
var myWidgetInstances = {} 

// Wrap your original code inside a function that recieves a newClassName parameter.
var createInstance = function(newClassName, index) {
    var form_progress = new ProgressBar.Circle('.' + newClassName, { // <-- Reference the new class name.
        color: '#475365',
        trailColor: '#CDD0D6',
        strokeWidth: 4,
        trailWidth: 2,
        easing: 'easeInOut',
        duration: 1400,
        text: {
            autoStyleContainer: false
        },
        from: {
            color: '#196ABC',
            width: 4
        },
        to: {
            color: '#196ABC',
            width: 4
        },
        // Set default step function for all animate calls
        step: function (state, form_progress) {
            form_progress.path.setAttribute('stroke', state.color);
            form_progress.path.setAttribute('stroke-width', state.width);

            var value = Math.round(form_progress.value() * 100);
            if (value === 0) {
                form_progress.setText('');
            } else {
                form_progress.setText(value + "%");
            }
        }
    });

    // Add this instance to a myWidgetInstances object so it can be referenced later;
    myWidgetInstances['form_progress-' + index] = form_progress;
}

// Obtain a reference to all the DOM elements with a classname '.form-progress'.
var all_instances = [].slice.call(document.querySelectorAll('.form-progress'));

// Loop through each instance of a DOM element with a classname '.form-progress'
all_instances.forEach(function(element, index) {

    // Create a new classname. The same as before except
    // with a number suffix.
    var newClassName = 'form-progress-' + index;

    // Add the new classname to the DOM element.
    element.classList.add(newClassName);

    // Invoke the createInstance function passing
    // the 'newClassName' as an argument.
    createInstance(newClassName, index);
});

// The following assumes there are atleast three 
// html div tags as follows:
// 
// <div class="form-progress"></div>

// Now set the animate value for each instance.
myWidgetInstances['form_progress-0'].animate(0.1);
myWidgetInstances['form_progress-1'].animate(0.2);
myWidgetInstances['form_progress-2'].animate(0.3);

希望这会有所帮助！