遍历数组并添加/删除类

Question

遍历数组并添加/删除类

3

目前，我需要重建一些页面，用原生JavaScript替换jQuery。在我的案例中，我有一个div包裹着一些图片。第一张图片有一个css修饰符（-active），在JavaScript中，我想要一个循环来删除该修饰符并将其赋予下一张图片。最终，该修饰符应再次放置在第一张图片上。这个函数还应该每秒运行一次。

HTML如下：

(function () {
    var container = document.getElementsByClassName('m-weatherMap__image');
    container = Array.from(container);

    timedLoop();

    function timedLoop () {
        var i = 0;
        setTimeout(function () {
            i++;

            timedLoop();
            if (i < container.length) {
                if (!container[i].classList.contains('-active')) {
                    setTimeout(fadeout, 300);
                    function fadeout () {
                        container[i - 1].classList.remove('-active');
                        container[i - 1].style.opacity = '0';
                    }
                    container[i].classList.add('-active');
                }
            }
        }, 1000);
    }
})();

<div class="m-weatherMap">
  <img class="m-weatherMap__image -active" src="bla">
  <img class="m-weatherMap__image " src="bla">
  <img class="m-weatherMap__image " src="bla">
  <img class="m-weatherMap__image " src="bla">
  <img class="m-weatherMap__image " src="bla">
  <img class="m-weatherMap__image " src="bla">
  <img class="m-weatherMap__image " src="bla">
  <img class="m-weatherMap__image " src="bla">
</div>

现在我想要一个循环，遍历数组并检查元素是否具有修改器。如果有，它将删除该元素并将其传递给下一个元素。目前，类将被添加到第二个图像，但不会继续添加到后面（昨天它可以一直工作到数组的末尾，不确定我改了什么），但是会在那里停止。

有人有主意吗？

- dbljn

5

每次调用 timedLoop() 时，你都将 i=0，为什么不使用 setInterval() 而不是 setTimeout() 呢？这样你就不必一直调用 timedLoop()。 - Giovani Vercauteren

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ashkan Pourghasem · Accepted Answer

我认为这不是一个坏的解决方案：

(function () {

    var container = document.getElementsByClassName('m-weatherMap__image');
    var counter = 0
    container = Array.from(container);
    setInterval(function() {
      if (counter === container.length - 1) {
        container[counter].classList.remove('-active');
        container[0].classList.add('-active');
        counter = 0;
        return;
      }
      
      if (counter <= container.length - 2) {
        container[counter].classList.remove('-active');
        container[counter+1].classList.add('-active');
      }
      
      counter++;
    }, 1000);
})();

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<style>.-active{transform: rotate(180deg);}img{width:50px;box-sizing:border-box;}</style>
<body>
<div class="m-weatherMap">
  <img class="m-weatherMap__image -active" src="https://i.pinimg.com/736x/60/d9/26/60d9269a5ada1ee5e2f5161d036209e5.jpg">
  <img class="m-weatherMap__image " src="https://i.pinimg.com/736x/60/d9/26/60d9269a5ada1ee5e2f5161d036209e5.jpg">
  <img class="m-weatherMap__image " src="https://i.pinimg.com/736x/60/d9/26/60d9269a5ada1ee5e2f5161d036209e5.jpg">
  <img class="m-weatherMap__image " src="https://i.pinimg.com/736x/60/d9/26/60d9269a5ada1ee5e2f5161d036209e5.jpg">
  <img class="m-weatherMap__image " src="https://i.pinimg.com/736x/60/d9/26/60d9269a5ada1ee5e2f5161d036209e5.jpg">
  <img class="m-weatherMap__image " src="https://i.pinimg.com/736x/60/d9/26/60d9269a5ada1ee5e2f5161d036209e5.jpg">
  <img class="m-weatherMap__image " src="https://i.pinimg.com/736x/60/d9/26/60d9269a5ada1ee5e2f5161d036209e5.jpg">
  <img class="m-weatherMap__image " src="https://i.pinimg.com/736x/60/d9/26/60d9269a5ada1ee5e2f5161d036209e5.jpg">
</div>
</body>
</html>