如何创建枚举元素句柄

Question

我有很多带有动画的 div 文本（在 100 年代） 而且我需要一种创建枚举元素句柄的方法（尽量避免使用数组） 像这样：

<div id="q1"> some text </div>
<div id="q2"> some text </div>

... 在 javascript 中，我想在 for 循环中创建元素句柄（动画处理器需要元素句柄）

喜欢：

for( let i=0; i<numQues; i++ ) {
    let q + i = document.getElementById("q"+i)
}

显然，这不起作用，但这就是我想要做的，然后我将元素句柄作为

【问题讨论】：

Answer 1

使用此代码 sn-p 您将能够遍历 DOM 中的多个项目并为其设置动画，我正在使用类，尽管您可以做任何您想做的事情，但是，我认为您可以理解。

const items = document.querySelectorAll('.item');
items.forEach(
  (item, i) =>
    setTimeout(
      () => item.classList.add('visible'),
      100 * i
    )
);

.item {
  opacity: 0;
  transition: all 250ms ease-out;
}

.item.visible {
  opacity: 1;
}

<div id="i1" class="item">item 1</div>
<div id="i2" class="item">item 2</div>
<div id="i3" class="item">item 3</div>
<div id="i4" class="item">item 4</div>
<div id="i5" class="item">item 5</div>
<div id="i6" class="item">item 6</div>
<div id="i7" class="item">item 7</div>
<div id="i8" class="item">item 8</div>
<div id="i9" class="item">item 9</div>
<div id="i10" class="item">item 10</div>