Javascript 在多个元素中重用脚本

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

我想用这段代码插入几个div，但是JS脚本只记住第一个值，并将它们放在使用“percent”的地方。有没有什么好的、干净的方法可以在多种情况下固定条值

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

试一试

.each（）

将分别对每个

.progress饼图进行更改，并基于它为特定图表计算的百分比，而不是仅使用第一个饼图的百分比

.each（）
将分别对每个
.progress饼图进行更改，并基于它为特定图表计算的百分比，而不仅仅是对所有图表使用第一个百分比
您应该对每个
元素进行更改

您应该为每个
。进度饼图
元素执行此操作

然后必须循环遍历每个
。进度饼图
元素使用
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+'%');
    });

使用多个图表。
然后必须循环查看每个
。进度饼图
元素使用
每个（）。试试这个：

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

有多张图表。
这就是我的想法。工作起来很有魅力。谢谢，这就是我的想法。工作起来很有魅力。非常感谢。
  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+'%');
    });