如何使用jQuery每隔3秒循环切换div元素的move类名

问题需求 #

实现move类名在所有.uspTag元素间循环切换：每隔3秒，移除当前带move类的div的类名，将其添加到下一个div元素上，当切换到最后一个元素后，回到第一个元素继续循环。

原代码问题分析 #

原代码的核心逻辑错误导致无法实现预期效果：

• active选择器错误：原代码中var active = $('#infobarContainer .uspTag');选中了所有.uspTag元素，而非当前带有move类的目标元素
• next元素查找逻辑错误：没有基于当前激活的元素去匹配下一个目标，而是基于所有.uspTag的第一个元素，导致切换逻辑混乱

修正后的完整代码 #

HTML部分（无需修改）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="infobarContainer">
  <div class="uspTag tagline tagline2 move">
    USP 1
  </div>
  <div class="uspTag tagline tagline2">
    USP 2
  </div>
  <div class="uspTag tagline tagline2">
    USP 3
  </div>
  <div class="uspTag tagline tagline2">
    USP 4
  </div>
</div>

JavaScript部分（修正核心逻辑）

$(document).ready(function () {
  setInterval(swapUsp, 3000);

  function swapUsp() {
    // 精准选中当前带有move类的元素
    var active = $('.infobarContainer .uspTag.move');
    // 基于当前元素查找下一个兄弟元素，不存在则回到第一个
    var next = active.next('.uspTag').length > 0 ? active.next('.uspTag') : $('.infobarContainer .uspTag:first');
    
    // 执行类名切换
    active.removeClass('move');
    next.addClass('move');
  }
});

关键修改说明 #

• 修正激活元素选择：使用.uspTag.move精准定位当前带move类的元素，确保每次操作的目标正确
• 修正下一个元素匹配逻辑：基于当前激活元素查找下一个.uspTag，保证切换的连续性，到末尾后自动回到第一个元素
• 移除冗余判断：初始状态已有带move类的元素，后续切换会持续维护这个状态，无需额外判断active.hasClass('move')

内容的提问来源于stack exchange，提问作者Mohamad