Question

我创建了一个在我的项目仪表板上使用的javascript图表但是我正在努力使它能够使用多个图表和相同的ID（它们必须与每个循环中的PHP内部名称相同）。

正如你在这支笔中看到的那样：

http://codepen.io/assasinate66/pen/GrMBYp

                <div class="progress-pie-chart" data-percent="40"><!--Pie Chart -->
                <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><!--End Chart -->

            <div class="progress-pie-chart" data-percent="70"><!--Pie Chart -->
                <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><!--End Chart -->
<script>
 $(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+'%');
});
  </script>

我已经定义了不同的百分比，但它只显示了两个图表上的第一个百分比，看起来它需要某种JS / Jquery循环。

谢谢！

Answer 1

问题在于您一次选择两个元素并尝试设置这些元素的属性。那不行。在我看来解决这个问题的最佳方法是使用.each（）（循环）。

$(function(){
    var $ppc = $('.progress-pie-chart');
    $ppc.each(function(){
        var percent = parseInt($(this).data('percent'));
        var 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+'%');
      });
});

使用这个JS，它会像魅力一样工作！

一页上的多个图表

1 个答案: