Блог

Главная - Вопросы по программированию - Javascript применить функцию ко всем элементам

Javascript применить функцию ко всем элементам

#javascript #html #jquery #r #svg

#javascript #HTML #jquery #r #svg

Вопрос:

Я создал код, который подсчитывает и устанавливает svg circle 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);

Я подумывал об использовании чего-то вроде .each() в jQuery, но я все еще не нахожу правильного решения. У вас есть какие-либо идеи?

Комментарии:

1. Что var circumferenceFunction = circleArray(); предполагается делать?

2. Вам не нужно ничего пробовать. ваш код работает для всех 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>