获取每个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))