Javascript 为所有元素应用一个函数答案

【问题标题】：Javascript apply a function for all the elementsJavascript 为所有元素应用一个函数
【发布时间】：2021-01-02 23:03:07
【问题描述】：

我编写了一个代码来计算和设置一个 svg 圆 strokeDasharray 和 strokeDashoffset。它工作得很好，但现在我必须将它应用于多个 svg。这是一个元素的工作代码：

<div class="progress-ring-container">
  <div class="span-container">
    <span>Users</span>
    <span>4.3</span>
  </div>

<svg data-percentage="4.3" class="progress-ring">
  <circle class="circle" r="25" cx="29" cy="29"/>
  <circle class="circle bg" r="25" cx="29" cy="29"/>
</svg>
</div>

// Circle progress bar
var circle = document.querySelector('circle');
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;

circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;

function setProgress(percent) {
   const offset = circumference - percent / 5 * circumference;
   circle.style.strokeDashoffset = offset;
}

var input = document.getElementsByClassName("progress-ring")[0].getAttribute("data-percentage");
setProgress(input);

这是我尝试解决问题的方法：

// Circle progress bar
var circles = document.querySelectorAll('circle');
var circlesArr = Array.from(circles);
circlesArr.forEach(circleArray);
 

function circleArray(circle) {
    var radius = circle.r.baseVal.value;
    var circumference = radius * 2 * Math.PI;

    circle.style.strokeDasharray = `${circumference} ${circumference}`;
    circle.style.strokeDashoffset = `${circumference}`;
    return circumference;
}

var circumferenceFunction = circleArray();

function setProgress(percent) {
   const offset = circumferenceFunction - percent / 5 * circumferenceFunction;
   circle.style.strokeDashoffset = offset;
}

var input = document.getElementsByClassName("progress-ring")[0].getAttribute("data-percentage");
setProgress(input);

我正在考虑在 jQuery 中使用类似 .each() 的东西，但我仍然找不到合适的解决方案。你有什么想法吗？

【问题讨论】：

var circumferenceFunction = circleArray(); 应该做什么？
你不需要尝试任何东西。您的代码适用于所有 svg。

标签： javascript html jquery r svg

【解决方案1】：

您可以尝试以下方法：

var circles = document.querySelectorAll('circle');
var circlesArr = Array.from(circles);



function circleArray(circle) {
  var radius = circle.r.baseVal.value;
  var circumference = radius * 2 * Math.PI;

  circle.style.strokeDasharray = `${circumference} ${circumference}`;
  circle.style.strokeDashoffset = `${circumference}`;
  const input = circle.closest('.progress-ring').getAttribute("data-percentage")
  setProgress(input, circle);

  function setProgress(percent, circle) {
    const offset = circumference - percent / 5 * circumference;
    circle.style.strokeDashoffset = offset;
  }
}

circlesArr.forEach(circleArray);

【讨论】：

【解决方案2】：

您的代码适用于所有svg 类是circle。为什么你要遍历它们。试试这个。这是html：

<div class="progress-ring-container">
  <div class="span-container">
    <span>Users</span>
    <span>4.3</span>
  </div>

<svg data-percentage="4.3" class="progress-ring">
  <circle class="circle" r="25" cx="29" cy="29"/>
  <circle class="circle bg" r="25" cx="29" cy="29"/>
</svg>
<svg data-percentage="4.3" class="progress-ring">
  <circle class="circle" r="25" cx="100" cy="29"/>
  <circle class="circle bg" r="25" cx="100" cy="29"/>
</svg>
<svg data-percentage="4.3" class="progress-ring">
  <circle class="circle" r="25" cx="180" cy="29"/>
  <circle class="circle bg" r="25" cx="180" cy="29"/>
</svg>
<svg data-percentage="4.3" class="progress-ring">
  <circle class="circle" r="25" cx="260" cy="29"/>
  <circle class="circle bg" r="25" cx="260" cy="29"/>
</svg>
<svg data-percentage="4.3" class="progress-ring">
  <circle class="circle" r="25" cx="340" cy="29"/>
  <circle class="circle bg" r="25" cx="340" cy="29"/>
</svg>
</div>

和js

var circle = document.querySelector('circle');
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;

circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;

function setProgress(percent) {
   const offset = circumference - percent / 5 * circumference;
   circle.style.strokeDashoffset = offset;
}

var input = document.getElementsByClassName("progress-ring")[0].getAttribute("data-percentage");
setProgress(input);

您的代码正在运行。我不明白。为什么你需要一一做。 CSS 适用于所有班级

var circle = document.querySelector('circle');
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;

circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;

function setProgress(percent) {
   const offset = circumference - percent / 5 * circumference;
   circle.style.strokeDashoffset = offset;
}

var input = document.getElementsByClassName("progress-ring")[0].getAttribute("data-percentage");
setProgress(input);

<svg data-percentage="4.3" class="progress-ring">
  <circle class="circle" r="25" cx="29" cy="29"/>
  <circle class="circle bg" r="25" cx="29" cy="29"/>
</svg>
<svg data-percentage="4.3" class="progress-ring">
  <circle class="circle" r="25" cx="100" cy="29"/>
  <circle class="circle bg" r="25" cx="100" cy="29"/>
</svg>
<svg data-percentage="4.3" class="progress-ring">
  <circle class="circle" r="25" cx="180" cy="29"/>
  <circle class="circle bg" r="25" cx="180" cy="29"/>
</svg>
<svg data-percentage="4.3" class="progress-ring">
  <circle class="circle" r="25" cx="260" cy="29"/>
  <circle class="circle bg" r="25" cx="260" cy="29"/>
</svg>
<svg data-percentage="4.3" class="progress-ring">
  <circle class="circle" r="25" cx="340" cy="29"/>
  <circle class="circle bg" r="25" cx="340" cy="29"/>
</svg>
</div>

【讨论】：