javascript - 一个用于多个 div 的 javascript？

Question

我有这个 HTML 和一个脚本

/**
 * Increment value with random intervals.
 * @param {string} id - Id of DOM Element.
 * @param {number} start - Start counter value. Applied immediately.
 * @param {number} end - End counter value.
 * @duration {number} duration - Max duration of one iteration in ms.
 */
function animateValue(id, start, end, duration) {
  let current = start;
  const obj = document.getElementById(id);
  obj.innerHTML = current; // immediately apply start value
  const setIncrOut = () => {
    let time = Math.random() * 500;
    setTimeout(function() {
      if (current < end) {
        current += 1;
        obj.innerHTML = current;
        setIncrOut(time)
      }
    }, time);
  }

  setIncrOut();
}

animateValue("value", 100, 1000000);

<div id="value">100</div>

基本上我想将这个 1 脚本用于多个 div：

<div id="value2">100</div>
<div id="value3">100</div>
<div id="value4">100</div>

我知道 div id 必须与脚本 id 匹配，是否有解决方法，这样我就不需要复制相同的脚本而只使用一个？

我计划使用其中的 200 多个，所以我认为这是不可行的，仅使用一个会节省大量资源。

编辑：我想我可以使用：

animateValue("value", 100, 1000000);
animateValue("value2", 100, 1000000);
animateValue("value3", 100, 1000000);

但也许有更简单的解决方案？

标签： javascript

Answer 1

试试这个

使用一个类，因为你使用的是 let，你可以用对象调用

/**
 * Increment value with random intervals.
 * @param {string} id - Id of DOM Element.
 * @param {number} start - Start counter value. Applied immediately.
 * @param {number} end - End counter value.
 * @duration {number} duration - Max duration of one iteration in ms.
 */
function animateValue(obj, start, end, duration) {
  let current = start;
  obj.innerHTML = current; // immediately apply start value
  const setIncrOut = () => {
    let time = Math.random() * 500;
    setTimeout(function() {
      if (current < end) {
        current += 1;
        obj.innerHTML = current;
        setIncrOut(time)
      }
    }, time);
  }
  setIncrOut();
}

document.querySelectorAll(".incr").forEach(obj => animateValue(obj, 100, 1000000));

<div class="incr">100</div>
<div class="incr">100</div>