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