変更コードは、コードのこの部分ではJavaScript

Question

ルックで複数のクラスを選択するには：

<script src="progressbar.js"></script> 

<script> 
var bar = new ProgressBar.Line(containera, { 
    strokeWidth: 4, 
    easing: 'easeInOut', 
    duration: 1400, 
    color: '#FFEA82', 
    trailColor: '#eee', 
    trailWidth: 1, 
    svgStyle: {width: '100%', height: '100%'}, 
    text: { 
    style: { 
     // Text color. 
     // Default: same as stroke color (options.color) 
     color: '#999', 
     position: 'absolute', 
     right: '0', 
     top: '30px', 
     padding: 0, 
     margin: 0, 
     transform: null 
    }, 
    autoStyleContainer: false 
    }, 
    from: {color: '#FFEA82'}, 
    to: {color: '#ED6A5A'}, 
    step: (state, bar) => { 
    bar.setText(Math.round(bar.value() * 40)); 
    } 
}); 

bar.animate(1.0); 
</script> 

上記のコードは、クラス「containera」で要素を選択し、それらを使って何かをします。コンテナ、コンテナ、コンテナ、コンテナ containerb しかし、私はすべてのクラスに対して自分のコードを繰り返すのは好きではありません。私はあなたが私を助けてほしい:)ありがとう。

Answer 1

あなたの設定を関数にラップして、あなたが持っているすべてのコンテナに対して呼び出さないのはなぜですか？これらの線に沿って作業することができます：

var yourContainers = ['containerA','containerB'] 

function createProgressbars = function(container){ 
return new ProgressBar.Line(container, { 
    strokeWidth: 4, 
    easing: 'easeInOut', 
    duration: 1400, 
    color: '#FFEA82', 
    trailColor: '#eee', 
    trailWidth: 1, 
    svgStyle: {width: '100%', height: '100%'}, 
    text: { 
    style: { 
     // Text color. 
     // Default: same as stroke color (options.color) 
     color: '#999', 
     position: 'absolute', 
     right: '0', 
     top: '30px', 
     padding: 0, 
     margin: 0, 
     transform: null 
    }, 
    autoStyleContainer: false 
    }, 
    from: {color: '#FFEA82'}, 
    to: {color: '#ED6A5A'}, 
    step: (state, bar) => { 
    bar.setText(Math.round(bar.value() * 40)); 
    } 
}); 
} 

yourContainers.forEach(function(container){ 
    createProgressbars(container).animate(1.0); 
});