Question

我有3倍的跨度，需要像这样添加/删除类：

<span class="w1 selected">Hello</span>
<span class="w2">Bonjour</span>
<span class="w3">Bon Giorno</span>

从第一个范围内的“选定”类开始，2秒后，“选定”类从第一个范围中删除并添加到第二个范围。然后是第三个，然后回到第一个，循环。我正在努力让这个工作。我正在使用addClass("selected).delay(2000).removeClass("selected")。然而，这没有做任何事情。我究竟做错了什么？

之前的帖子之间的区别在于我有3个不同的跨度，需要按顺序添加和删除“已选择”类，因此跨度为1秒，跨度为2秒，跨度为2秒，然后再返回在span1等我可以使用setinterval添加类，但然后它同时触发所有3个跨度。任何人都有任何建议如何做到这一点？感谢。

Answer 1

你拥有的是一个简单的重复队列。您所犯的错误与"how to add and remove a class in jquery every 4 seconds"中的错误相同，这就是我将其作为副本关闭的原因。正如其他人似乎不同意我一样，我会继续回答这个问题，以便更清楚地解释细节。

addClass和removeClass不与jQuery的动画队列交互。您只能delay使用queued函数，例如queue，animate，fadeIn，fadeOut等等。

要让addClass和removeClass在队列中工作，您只需将它们包裹在.queue()的调用中：

$(...).queue(function (next) {
    $(this).addClass('selected');
    next();
}).delay(2000).queue(function(next) {
    $(this).removeClass('selected');
    next();
});

正如我在my previous answer中所说：

提供给函数的参数是一个告诉队列继续的函数，以防您想要执行异步操作，例如使用$.ajax。

以上所有内容在问题之间都是相同的，它们在这里分散略微。

具有多个元素对于能够按顺序排队它们并不是特别重要。所需要的只是一个元素来保存队列，并迭代队列中的整个元素集合。

//this function builds the queue chain for each of
//the elements in the selection
function toggleSelected(next) {
  var $this = $(this);

  //select the elements that need to be toggled through
  $('.a, .b, .c').each(function (i, elem) {
    //add a queue chain for each element individually
    $this.queue(function (n) {
      $(elem).addClass('selected');
      //n was used to avoid conflicting with `next` above
      n();
    }).delay(2000).queue(function (n) {
      $(elem).removeClass('selected');
      n();
    });
  });

  //after every element's been queued up, run this
  //function again to loop infinitely
  $this.queue(toggleSelected);

  next();
}

//pick an element, any element
//here I went with .a because it was in the collection
//it could just as easily have been window or document
//or body or html or ...
$('.a').queue(toggleSelected);

＆＃13;

function toggleSelected(next) {
  var $this = $(this);
  
  $('.a, .b, .c').each(function (i, elem) {
    $this.queue(function (n) {
      $(elem).addClass('selected');
      n();
    }).delay(2000).queue(function (n) {
      $(elem).removeClass('selected');
      n();
    });
  });
  
  $this.queue(toggleSelected);
  next();
}

$('.a').queue(toggleSelected);

＆＃13;

span {
  background-color: grey;
  display: inline-block;
  height: 50px;
  width: 50px;
}
.selected {
  background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="a"></span>
<span class="b"></span>
<span class="c"></span>

＆＃13;

循环中添加/删除类

1 个答案: