Question

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

那会发生什么：

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

2-将值从脚本发送到div格式的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()返回一个没有方法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＆＃34;和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");

Answer 2

你应该能够用jQuery做类似的事情......

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

径向进度条

2 个答案: