獲取每個div的數據值

Question

我使用了幾個插件來使用JavaScript爲進度條設置動畫效果。

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

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

我想要得到的數據值，每一次，但我此刻的代碼將停止所有的人都在第1 div的值設置動畫，並在該值停止。

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))