同一页面上有多个 js 进度条？

Question

我正在使用 progressbar.js 进行一个项目，我想在我的页面上有多个进度条。有一个动态数量，所以我不确定我将在页面上有多少进度条。

我的 JSFiddle 我只是简单地复制了代码并给第二个进度条一个 .progress2 class。理想情况下，我希望通过简单地给它一个 .progress class

让进度条为每个元素工作

var circle = new ProgressBar.Circle('.progress', {
    color: startColor,
    easing: 'linear',
    strokeWidth: 8,
    duration: 1500,
    text: {
        value: '0'
    }
});

显然我想我会先收集这些值并将它们放入一个数组中，但我什至无法让它工作。有人能给我一个正确的方向吗，因为我对 javascript.

不是很好

如果有人看一看并告诉我这是否可以按照我想要的方式完成，我将不胜感激。

Answer 1

斯蒂芬晚上好，

我认为这就是您要查找的内容：http://jsfiddle.net/8xa87k31/499/

$('.progress').each(function() {
    var circle = new ProgressBar.Circle(this, {
        color: startColor,
        easing: 'linear',
        strokeWidth: 8,
        duration: 1500,
        text: {
            value: '0'
        }
    });

    var value = ($(this).attr('value') / 100);

    circle.animate(value, {
        from: {
            color: startColor
        },
        to: {
            color: endColor
        },
        step: function(state, circle, bar) {
            circle.path.setAttribute('stroke', state.color);
            console.log(circle);
            circle.setText((circle.value() * 100).toFixed(0));
        }
    });
});

看到了吗？没什么大不了的！ :-)

注意：我相信，这可以改进。

同一页面上有多个 js 进度条？

Multiple js progressbars on the same page?

javascript

arrays

oop

jquery

progress-bar