javascript - 径向进度条

Question

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

那么应该发生什么:

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

Answer 1

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

一、方法document.getElementById()返回没有方法的 DOM 元素 getElementById ，这意味着它不能像这样连续被调用两次。另外，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");