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+'%');
    }     
});

Answer 2

尝试

(function($, var_1, var_2) {
    // use JQuery, var_1 and var_2 as local variables
})($, var_1, var_2);

$(function(){ var $ppc = $('.progress-pie-chart'); var percent; $ppc.each(function(){ percent = parseInt($(this).data('percent')); deg = 360*percent/100; if (percent > 50) { $(this).addClass('gt-50'); } $(this).find('.ppc-progress-fill').css('transform','rotate('+ deg +'deg)'); $(this).find('.ppc-percents span').html(percent+'%'); }); });将分别对每个.each()进行更改，并以其为该特定图表计算的百分比为基础，而不是仅使用所有这些的第一个百分比

Answer 3

然后，您必须遍历每个.progress-pie-chart元素使用each()。试试这个：

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

带有多个图表的

DEMO。

在多个元素中重用脚本

3 个答案: