我只是把它留在这里，也许它会帮助某人

Question

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

＆＃13;

$(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;
    }

}

＆＃13;

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

＆＃13;

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

＆＃13;

有人可以解释我的代码有什么问题。

由于

Answer 1

您不需要检查prev cell是否具有该类，我认为您只需要将其添加到下一个[i]项。查看这里的评论：

＆＃13;

//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);

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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＆＃39; toggleClass()函数。这样做，您不需要检查是否在单元格或其上一个单元格上设置了类。 toggleClass()只是添加一个传入的类，如果它没有附加到该元素，或者删除它，如果它已被附加到该元素。

为了实现这一点，只需将red类手动地放到每个第二个单元格中，让算法完成其余的工作。

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

$(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/

Answer 4

将JS更改为此，它可以正常工作： http://codepen.io/anon/pen/pEPdKv

$(document).ready(function() {
  setInterval(AddRedClass, 1000);
});

function AddRedClass() {
  // get all boxes
  var boxes = $('.box');
  // remove the current .red class and move it to the next   
  for (var i = 0; i < boxes.length; i++) {
    // check if this is a .red box
    if ($(boxes[i]).hasClass('red')) {
      // remove the current .red
      $(boxes[i]).removeClass('red');
      // move to the next box if is <9
      if (i < boxes.length - 1) {
        $(boxes[i + 1]).addClass('red');
      } else {
        // or else go back to first one
        $(boxes[0]).addClass('red');
      }
      // job done, return
      return;
    }
  }
  // if no .red box is found, then just make it the first
  $(boxes[0]).addClass('red');
  }

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

4 个答案:

编辑：误解了问题后

我只是把它留在这里，也许它会帮助某人