径向进度条答案

【问题标题】：Radial progress bar径向进度条
【发布时间】：2018-03-21 15:37:23
【问题描述】：

我正在创建一个径向进度条，我正在从数据库中获取百分比。

那么应该发生什么：

1- 从数据库中获取百分比值（完成）

2- 将值从脚本发送到 HTML 中的 div。

3- jQuery 采用百分比 div 并创建径向进度。

但是我在第 2 个问题中遇到了问题，我没有正确发送值，因为它在 div 中的 div 中。

这是 div 部分：

 <div class="ia-radial red1">
    <svg viewBox="0 0 100 100">
      <circle r="25" cx="50" cy="50" id="pie" />
    </svg>
    <div id="precent"></div>
  </div>

这是我发送从我的脚本方法中获取的值的部分，该方法从数据库中获取百分比：

document.getElementById('ia-radial red1').getElementById('precent').innerHTML = HappyCity;

这是 jQuery 部分：

     $('.ia-radial').each(function(){
     var utilslider = parseInt($(this).find("#precent").html()),
      circle = $(this).find("#pie"),
      radius = parseInt(circle.attr('r')),
      circumf= 2 * radius * Math.PI,
      percentV = (utilslider / 100) * circumf;

  circle.css('strokeDasharray', percentV + " " + circumf);

codepen

【问题讨论】：

标签： javascript jquery html progress-bar

【解决方案1】：

有两件事可以帮助您解决问题。

首先，方法document.getElementById() 返回一个没有方法getElementById 的DOM 元素，这意味着它不能像这样连续调用两次。另外，ia-radial red1 是两个类名，而不是 ID 名，所以getElementById 不会成功选择<div class="ia-radial red1">。解决此问题的最佳方法是在文档中为每个 div 使用一个 ID 名称，这是常规方法。尝试将<div id="precent"> 设置为<div class="precent">（也不要忘记在CSS 文件中将#precent 更改为.precent）。然后为两个 div 分配一个特定的 ID（例如 id="precent1" 和 id="precent2"）。然后您可以选择一个带有 document.getElementById('precent1').innerHTML = HappyCity; 的 div。

其次，当页面加载时，jQuery 部分只被调用一次。更改innerHTML 后，您需要再次调用它。尝试将其包装在这样的函数中，并添加输入 idName 以便您可以在特定元素上调用该函数：

function updateProgressBar(idName) {
  $('.ia-radial').each(function(){
  var utilslider = parseInt($(this).find("#"+idName).html()), // Note the idName
    circle = $(this).find("#pie"),
    radius = parseInt(circle.attr('r')),
    circumf= 2 * radius * Math.PI,
    percentV = (utilslider / 100) * circumf;

    circle.css('strokeDasharray', percentV + " " + circumf);
  });
}

现在，将这两件事放在一起，您可以像这样更新每个元素：

updateProgressBar("precent1");

document.getElementById('precent1').innerHTML = HappyCity;

// Update progress bar after changing innerHTML
updateProgressBar("precent1");

【讨论】：

【解决方案2】：

你应该可以用 jQuery 做类似的事情......

   $('.ia-radial.red1').children('#precent').html(HappyCity)

【讨论】：