如何使用jQuery在循环中添加和删除类

Question

我有一个3x3的网格。红色类需要添加到我的网格单元格中。它必须从cell1继续到单元9，一旦它到达cell9，它应该再次从cell1开始。在位置cell2，它必须检查cell1是否有red类，如果有，删除它并将"red“类添加到cell2中，这个过程应该永远继续下去。

​

$(document).ready(function () {

    // setInterval(AddRedClass(), 1000)

});

function AddRedClass() {
    var boxes = $('.box');
    var boxLength = boxes.length - 1;
    var lastChildIndex;

    for (var index = 0; index < boxLength;) {

        var currentBox = $(boxes[index]);
        var lastChildIndex = (index == 0) ? boxLength : index - 1;
        var prevBox = $(boxes[lastChildIndex]);

        if (prevBox.hasClass('red'))
            setTimeout(prevBox.removeClass('red'), 1000);

        setTimeout(currentBox.addClass('red'), 1000);
        index = (index + 1) % boxLength;
    }

}

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 250px;
}

.box {
    width: 30%;
    border: 1px solid green;
}

.red {
    background: red!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
        <div class="box">
            c-1
        </div>
        <div class="box">
            c-2
        </div>
        <div class="box">
            c-3
        </div>
        <div class="box">
            c-4
        </div>
        <div class="box">
            c-5
        </div>
        <div class="box">
            c-6
        </div>
        <div class="box">
            c-7
        </div>
        <div class="box">
            c-8
        </div>
        <div class="box">
            c-9
        </div>
    </div>

​

有人能解释一下我的代码出了什么问题吗？

谢谢

Answer 1

你不需要检查上一个单元格是否有这个类，我认为你只需要把它添加到下一个[i]项目中。在这里查看评论：

​

//Create a var to store the index of red element
var count = -1;
function AddRedClass() {
  var boxes = $('.box');
  var boxLength = boxes.length - 1;
  //Check if the actual item isn't more than the length then add 1 otherway restart to 0
  count < boxLength ? count++ : count=0;
  //Remove the class and add it to the new target
  boxes.removeClass('red').eq(count).addClass('red');
}
setInterval(AddRedClass, 1000);

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 250px;
}
.box {
  width: 30%;
  border: 1px solid green;
  transition: background .3s linear;
}
.red {
  background: red!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="box">
    c-1
  </div>
  <div class="box">
    c-2
  </div>
  <div class="box">
    c-3
  </div>
  <div class="box">
    c-4
  </div>
  <div class="box">
    c-5
  </div>
  <div class="box">
    c-6
  </div>
  <div class="box">
    c-7
  </div>
  <div class="box">
    c-8
  </div>
  <div class="box">
    c-9
  </div>
</div>

​

Answer 2

jQuery的addClass方法实际上会将类添加到jQuery集合中，因此您不需要遍历它。

$('.box').addClass('red');

但是，看起来您想要设置长方体集合的动画。如果是这样的话，你就有了一系列新的问题。

在一个循环中执行所有这一切将发生得如此之快，你可能甚至都不会注意到这一点。您需要做的是使用setTimeout实现一个递归函数

animateBoxes();

function animateBoxes() {
    var $boxes = $('.box'); // prefix the variable name with a $ to identify it as a jquery object, totally optional
    var boxLength = $boxes.length - 1;
    var lastChildIndex;

    addRedClass(0); // pass 0 in the first index
}

function addRedClass(index) {
    var $currentBox = $boxes.eq(index);
    var lastChildIndex = (index == 0) ? boxLength - 1 : index - 1;
    $boxes.removeClass('red'); // remove red class from all boxes
    $currentBox.addClass('red');

    setTimeout(function () { // set timeout needs a callback function, you cant just pass the function directly
        index = (index + 1) % boxLength; // increment index
        addRedClass(index);
    }, 1000);
}

我没有对它进行测试，但这是一种可以有效完成您想要完成的任务的方法。

Answer 3

编辑:在误解问题之后

为了实现您想要的结果，您可以使用jQuery的each()函数来遍历每个元素。使用此函数，您将始终知道您当前正在访问哪个元素(通过其索引)，因此您将能够检查是否需要将red类添加到下一个单元格中。不要忘记在你的循环之外使用一个计数器，也不要忘记相应地重置和计数它。

示例：https://jsfiddle.net/Ld7wc44m/4/

===

我就把这个留在这里，也许它能帮到别人

我推荐使用jQuery的toggleClass()函数。这样做，您不需要检查一个类是在一个单元格上还是在它的前一个单元格上设置的。toggleClass()只是添加一个传入的类，如果它没有附加到该元素，或者删除它，如果它已经附加到该元素。

为了让它正常工作，只需将red类手动放到每2个单元格中，然后让算法来完成其余的工作。

虽然你的代码也有更好的可读性。您还可以通过调整超时功能来设置颜色切换的时间。

$(document).ready(function() {
  toggleRedClass();
});

function toggleRedClass() {
  var boxes = $('.box');
  var boxesLength = boxes.length;

  $.each(boxes, function(index, value) {
    $(value).toggleClass('red');
  });

  setTimeout(function() {
    toggleRedClass();
  }, 1000);
}

工作现场演示：https://jsfiddle.net/Ld7wc44m/3/