将动态 div id 传递给没有链接和悬停的 javascript

Question

我在一个 while 循环中有多个动态 div id，这个 div id 将在 JavaScript 中用于显示径向进度条。我的问题是，虽然我有唯一的 ID，但我无法将这个唯一的 ID 传递给我的 JavaScript 以显示每个 ID 的不同径向进度。我曾尝试使用 div 类，但这只是在所有进度条中重复循环的最后一个 id。我不想使用链接或悬停来获取唯一 ID，因为我希望 JavaScript 在页面加载时触发。如何让我的 while 循环中的每个 div 正确显示进度条。

sample.php

<?php
    ..................................
    while($obj = $getcDetails->fetch()){
        //div that displays radial progress bar
        echo '
            <div class="page" style="color:#000000;">
                <div id="progress-pie-chart'.$Id.'" data-percent="'.$cId.'">
                    <div class="ppc-progress">
                        <div class="ppc-progress-fill"></div>
                    </div>
                <div class="ppc-percents">
                <div class="pcc-percents-wrapper">
                    <span>%</span>
                </div>
            </div></div></div>';
?>

sample.js

<script>
$(function(){
    var $ppc = $('.progress-pie-chart'),//add dynamic id here to display multiple progress bar unique to that div
    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+'%');
});
</script>

非常感谢任何帮助或指导。

Answer 1

您可以将这个逻辑建立在一个类上。鉴于进度填充和百分比是进度饼图的子项，您可以通过上下文查找找到需要更改的内容。

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