Javascript:如何动态定位变量

Question

所以我有一组以数字结尾的变量，我想定位每个变量并动态删除和添加一个类。我似乎无法弄清楚，有什么想法吗？

var img1 = document.getElementById('img1'),
    img2 = document.getElementById('img2'),
    img3 = document.getElementById('img3'),
    img4 = document.getElementById('img4');
    counter = 0;

 for(i=1; i < 5; i++){
        counter++;
        img+counter.classList.remove('hideImg');
        img+counter.classList.add('showImg');
}

Answer 1

将图像存储在数组或对象中并迭代元素 - 您可以通过它们的索引或键访问它们。

这是一个带有数组的示例:

var img1 = document.getElementById('img1'),
img2 = document.getElementById('img2'),
img3 = document.getElementById('img3'),
img4 = document.getElementById('img4');

var images = [img1, img2, img3, img4];

for (var i = 0; i < images.length; i++) {
  images[i].classList.remove('hideImg');
  images[i].classList.add('showImg');
}

这是一个带有对象的示例:

var img1 = document.getElementById('img1'),
img2 = document.getElementById('img2'),
img3 = document.getElementById('img3'),
img4 = document.getElementById('img4');

var images = {
  img1: img1,
  img2: img2,
  img3: img3,
  img4: img4
};

for (imagekey in images) {
  images[imageKey].classList.remove('hideImg');
  images[imageKey].classList.add('showImg');
}

这是一个带有数组的示例，一次仅显示一张图像，其间存在延迟:

var img1 = document.getElementById('img1'),
img2 = document.getElementById('img2'),
img3 = document.getElementById('img3'),
img4 = document.getElementById('img4');

var images = [img1, img2, img3, img4];
var i = 0;

setInterval(cycleImage, 3000);

function cycleImage() {
  images[i].classList.remove('hideImg');
  images[i].classList.add('showImg');
  if (i === images.length) {
    i = 0;
  } else {
    i++;
  }
}