javascript - 在循环中自动向多个 ID 添加和删除事件类

Question

目前有以下HTML:

<div class="wrapper">
<div id="sat0" class="sat"></div>
<div id="sat1" class="sat"></div>
<div id="sat2" class="sat"></div>
<div id="sat3" class="sat"></div>
<div id="sat4" class="sat"></div>
<div id="sat5" class="sat"></div>
<div id="sat6" class="sat"></div>
<div id="sat7" class="sat"></div>
<div id="sat8" class="sat"></div>
<div id="sat9" class="sat"></div>
<div id="sat10" class="sat"></div>
<div id="sat11" class="sat"></div>
</div>

我想在页面加载时将 class="active"添加到 id="sat0"和 id="sat6"。然后一秒钟后，事件类应该从两者中删除并添加到下一个类中，因此 id="sat1"和 id="sat7"。它应该无限循环，所以当到达 id="sat5"和 id="sat11"时，下一个将是 "id=sat6"和 id="sat0"。

目前正在使用以下 javascript。

<script>
$(document).ready(function(){
      $("#sat0").addClass("active");
      $("#sat6").addClass("active");
      setTimeout(autoAddClass, 1200);
});

function autoAddClass(){
  var next = $(".active").removeClass("active").next();
  if(next.length)
      $(next).addClass('active');
  else
  $("#sat0").addClass("active");
  $("#sat6").addClass("active");
  setTimeout(autoAddClass, 1200);
}
</script>

它的行为相当困惑。有什么想法吗？

Answer 1

您似乎出现困惑行为的主要原因是您总是将 active 添加回 #sat6，因为您需要在 中使用一个 block >else(真的，我建议始终使用带有控制流语句的 block )所以 #sat6 部分是有条件的:

function autoAddClass(){
    var next = $(".active").removeClass("active").next();
    if(next.length) {
      $(next).addClass('active');
    } else {
        $("#sat0").addClass("active");
        $("#sat6").addClass("active");
    }
    setTimeout(autoAddClass, 1200);
}

更新示例:

function autoAddClass(){
    var next = $(".active").removeClass("active").next();
    if(next.length) {
        $(next).addClass('active');
    } else {
        $("#sat0").addClass("active");
        $("#sat6").addClass("active");
    }
    setTimeout(autoAddClass, 1200);
}
autoAddClass();

.active {
  background-color: yellow;
}

<div class="wrapper">
<div id="sat0" class="sat">0</div>
<div id="sat1" class="sat">1</div>
<div id="sat2" class="sat">2</div>
<div id="sat3" class="sat">3</div>
<div id="sat4" class="sat">4</div>
<div id="sat5" class="sat">5</div>
<div id="sat6" class="sat">6</div>
<div id="sat7" class="sat">7</div>
<div id="sat8" class="sat">8</div>
<div id="sat9" class="sat">9</div>
<div id="sat10" class="sat">10</div>
<div id="sat11" class="sat">11</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

但另一个原因是顶部序列(以 #sat0 开始)比其他序列持续时间更长；你可能想要 if (next.length == 2) 而不仅仅是 if (next.length):

function autoAddClass(){
    var next = $(".active").removeClass("active").next();
    if(next.length == 2) {
        $(next).addClass('active');
    } else {
        $("#sat0").addClass("active");
        $("#sat6").addClass("active");
    }
    setTimeout(autoAddClass, 1200);
}
autoAddClass();

.active {
  background-color: yellow;
}

<div class="wrapper">
<div id="sat0" class="sat">0</div>
<div id="sat1" class="sat">1</div>
<div id="sat2" class="sat">2</div>
<div id="sat3" class="sat">3</div>
<div id="sat4" class="sat">4</div>
<div id="sat5" class="sat">5</div>
<div id="sat6" class="sat">6</div>
<div id="sat7" class="sat">7</div>
<div id="sat8" class="sat">8</div>
<div id="sat9" class="sat">9</div>
<div id="sat10" class="sat">10</div>
<div id="sat11" class="sat">11</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

---

顺便说一句，如果你想让添加/删除 div 变得更容易，你不需要任何这些 id="...";只需使用 $(".sat:nth-child(1)") 和 $(".sat:nth-child(7)") (或者如果你有那里的其他元素，$(".sat:eq(0)") 和 $(".sat:eq(6)")) 以:

function autoAddClass(){
    var next = $(".active").removeClass("active").next();
    if(next.length == 2) {
        $(next).addClass('active');
    } else {
        $(".sat:nth-child(1)").addClass("active");
        $(".sat:nth-child(7)").addClass("active");
    }
    setTimeout(autoAddClass, 1200);
}
autoAddClass();

.active {
  background-color: yellow;
}

<div class="wrapper">
<div class="sat">0</div>
<div class="sat">1</div>
<div class="sat">2</div>
<div class="sat">3</div>
<div class="sat">4</div>
<div class="sat">5</div>
<div class="sat">6</div>
<div class="sat">7</div>
<div class="sat">8</div>
<div class="sat">9</div>
<div class="sat">10</div>
<div class="sat">11</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

(如果您有多个 .wrapper 在其中执行此操作，则必须稍微调整一下才能在它们中单独工作...)