每2000毫秒更改一次Div的类名称

Question

我有四个div，其中第一个div具有“选定”类。 我想删除该类，并将其添加到2000毫秒后的下一个div数字2上。 但是然后又过了2000毫秒，我需要删除该类并将其附加到div编号3上，依此类推。 但这是行不通的。 有什么线索吗？

的JavaScript

var sel = "";
function aaa() {
    $('#holder > div').each(function () {
        var isSelected = $(this).hasClass("selected");
        if (isSelected) {
            var selectedId = $(this).attr('id');
            console.log(selectedId);
            $(this).removeClass("selected");
            $("#" + selectedId).next().addClass("selected");
        }
    });
}

setInterval(aaa, 5000);

的HTML

<div id="holder">
    <div id="one" class="selected"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"></div>
</div>

Answer 1

您在此行中输错了“ selected”：

$(this).removeClass("selectedP");

另外，您可以直接进入所选的div：

function aaa() {
  var $selected = $("#holder > .selected");
  var $next = $selected.next();

  // Wrap around
  if($next.length === 0) {
    $next = $("#holder > div:first-child");
  }

  $selected.removeClass("selected");
  $next.addClass("selected");
}

Answer 2

使用jQuery和document.ready（）函数内部：

while(someConditionThatWillStopTheMadness)
{
    setInterval(moveToNextDiv, 2000);
}

function moveToNextDiv(){
    var currentDiv = $('#holder > div.selected').removeClass("selected");
    var nextDiv = currentDiv.next().addClass("selected");
}

显然someConditionThatWillStopTheMadness可以阻止此情况，例如，检查这确实是最后一个div。 您可以在那一刻循环回到第一个，也可以停止循环

Answer 3

您的错误来自selectedP而不是selected

您还可以使用以下方法简化操作：

  function aaa() {    
        var currentDiv = $('#holder .selected');
        currentDiv.removeClass("selected");
        currentDiv.next().addClass("selected");    
  }