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

将动态div id传递给javascript，不带链接和悬停

1 个答案: