Question

目前有以下HTML：

mysql> SHOW STATUS WHERE variable_name = 'Max_used_connections';
+----------------------+-------+
| Variable_name        | Value |
+----------------------+-------+
| Max_used_connections | 15     |
+----------------------+-------+
1 row in set (0.00 sec)

我希望班级=＆＃34;活跃＆＃34;添加到id =＆＃34; sat0＆＃34;和id =＆＃34; sat6＆＃34;在页面加载。然后一秒钟后，活动类应从两者中删除并添加到下两个中，因此id =＆＃34; sat1＆＃34;和id =＆＃34; sat7＆＃34;。它应该无休止地循环，所以当得到id =＆＃34; sat5＆＃34;和id =＆＃34; sat11＆＃34;接下来将是＆＃34; id = sat6＆＃34;和id =＆＃34; sat0＆＃34;。

目前使用以下javascript。

<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>

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

Answer 1

您似乎遇到混乱行为的主要原因是您始终将active添加回#sat6，因为您需要在else中使用一个块（真的，我建议始终使用带有control-flow语句的块），因此#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正在进行此操作，则必须稍微调整一下才能在其中单独使用...）

在循环中自动添加和删除活动类到多个ID

1 个答案: