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

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

简要查看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);

希望这有帮助！

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

1 个答案: