同一页面上如何使用多个JavaScript进度条？

Question

我正在使用progressbar.js开发一个项目，希望在我的页面上有多个进度条。由于数量是动态的，我无法提前确定页面上会有多少进度条。

在我的JSFiddle中，我只是简单地复制了代码，并给第二个进度条加了一个.progress2类。理想情况下，我希望通过给每个元素一个.progress类即可为每个元素设置进度条。

链接：http://jsfiddle.net/8xa87k31/497/

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

显然，我想首先收集这些值并将它们放入一个数组中，但我甚至无法使其工作。由于我不太擅长JavaScript，所以是否有人能给我指点方向呢？

如果有人能看一下并告诉我是否可以按照我希望的方式完成这个任务，我会非常感激。

- Stephan-v

Answer 1

晚上好，Stephan，

我认为这就是你要找的：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));
        }
    });
});

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

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

- Arnaud

---

你是我的英雄 :) 如此简单，却如此有效。 - Stephan-v

不客气，重要的是下次你不会再卡住了！ :) - Arnaud