獲取每個div的數據值

Question

我正在使用幾個插件來使用JavaScript設置進度條的動畫。

我在HTML中設置每個數據的值，以避免每次都在JavaScript中定義它。

<div class="progress-circle" data-value="0.65">

我想讓數據值進行動畫處理並每次都停止在該值上，但是我目前擁有的代碼將所有這些值都停止在1div值上。

    var el = $('.progress-circle'),
    inited = false;

    el.appear({ force_process: true });

    el.on('appear', function() {
      if (!inited) {
        el.circleProgress({ value: el.attr('data-value') });
        inited = true;
      }
    });

    $('.progress-circle').circleProgress({
        size: 80,
        startAngle: -Math.PI / 4 * 2,
        lineCap: "round",
        fill: { color: "#64B46E" } 
    }).on('circle-animation-progress', function(event, progress, stepValue) {
    $(this).find('.inner').text(String(stepValue.toFixed(2)).substr(2)+ '%');
});

我如何才能使用每個div的唯一數據值屬性？

Answer 1

$('your-div').each(function() {
   //do something with $(this).data('value');
   //other way to get is $(this).attr('data-value');
});

Answer 2

因為$('.progress-circle')返回一個元素數組嘗試遍歷每個元素，這可能起作用:)

var arr_el = $('.progress-circle');
$(arra_el).each(function(i,el){

   var inited = false;
   el.appear({ force_process: true });
   el.on('appear', function() {
    if (!inited) {
      el.circleProgress({ value: el.attr('data-value') });
      inited = true;
    }
   });
   $(el).circleProgress({
    size: 80,
    startAngle: -Math.PI / 4 * 2,
    lineCap: "round",
    fill: { color: "#64B46E" } 
   }).on('circle-animation-progress', function(event, progress, stepValue) {
     $(this).find('.inner').text(String(stepValue.toFixed(2)).substr(2)+ '%');
   });
});

Answer 3

您需要遍歷所有元素，這只是在分鍾內對第一個元素進行操作。 jQuery具有each() 。 Sans jQuery（ES2015語法），用於比較：

Array.from(document.querySelectorAll('.progress-circle'))
     .forEach(pCircle => someFunctionThatRunsYourSideEffects(pCircle))