javascript - 在多个元素中重用脚本

Question

我有一段显示径向条的代码，如这个最小的工作示例所示:

http://codepen.io/shankarcabus/pen/GzAfb

我想用这段代码插入几个div，但是JS脚本只记住第一个值并将它们放置在使用“百分比”的任何地方。有没有什么好的、干净的方法来修复多种情况下的柱值？

JS代码:

$(function(){
    var $ppc = $('.progress-pie-chart'),
    percent = parseInt($ppc.data('percent')),
    deg = 360*percent/100;
    if (percent > 50) {
        $ppc.addClass('gt-50');
    }
    $('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
    $('.ppc-percents span').html(percent+'%');
});

Answer 1

您应该对每个 .progress-pie-chart 元素执行此操作。 。 http://codepen.io/anon/pen/WvWaYB

$(function(){
  var $ppc = $('.progress-pie-chart');
  for(var i = $ppc.length; i --; ) {
      var el = $ppc[i],    
      percent = parseInt($(el).data('percent')),
      deg = 360*percent/100;
      if (percent > 50) {
        $(el).addClass('gt-50');
      }
      $(el).find('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)');
      $(el).find('.ppc-percents span').html(percent+'%');
    }     
});