Question

我使用一些插件来使用JavaScript动画进度条。

我在HTML中设置每个数据的数据值，以避免每次都在JavaScript中定义它。

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

我希望每次都将数据值设置为动画并停在该值，但我现在的代码会在第一个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))

获取每个div的数据值

3 个答案: