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

当前具有以下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>

它的行为相当混乱。有什么想法吗？

最佳答案

您似乎会出现混乱行为的主要原因是，您总是将active重新添加到#sat6，因为您需要在else中使用一个块（实际上，我建议始终将块与控制流语句一起使用） ），因此#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，则必须稍作调整以使其分别在其中工作...）