[英]Javascript apply a function for all the elements
I have made a code that counts and sets an svg circle strokeDasharray and strokeDashoffset.我已经编写了一个计算和设置svg圆strokeDasharray和strokeDashoffset的代码。 It works completely fine but now I have to apply it for multiple svgs.
它完全正常,但现在我必须将它应用于多个 svg。 Here is the working code for one element:
这是一个元素的工作代码:
<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);
And here is how I tried to solve the problem:这是我尝试解决问题的方法:
// 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);
I was thinking of using something like .each() in jQuery but I still don't find the right solution.我想在 jQuery 中使用类似 .each() 的东西,但我仍然没有找到正确的解决方案。 Do you have any idea?
你有什么主意吗?
You can try something like below :您可以尝试以下操作:
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);
Your code works for all svg
which class is circle
.您的代码适用于所有类为
circle
svg
。 why you are looping over them.为什么你要遍历它们。 just try this.
试试这个。 here is html:
这是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>
and js和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);
your code is working.您的代码正在运行。 i didnt understand.
我不明白。 why you need do that one by one.
为什么你需要一一做。 css works for all class
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.