Question

如何才能一次将Class添加到某个元素？我正在寻找一种方法将类添加到元素中有一些延迟（逐个），而不是一次将类应用于所有。

$("button").click(function(){
    $("p").each(function(){
        $(this).addClass('blue');
    });
});

.blue {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add</button>
<p>App </p>
<p>App </p>
<p>App </p>
<p>App </p>
<p>App </p>
<p>App </p>
<p>App </p>
<p>App </p>
<p>App </p>

Answer 1

如评论中所述，您可以使用setTimeout：

$("button").click(function(){
    $("p").each(function(index){
      const element = this;
      // Delay in ms
      const delay = index * 1000;

      setTimeout(function() {
        $(element).addClass('blue');
      }, delay);

    });
});

Answer 2

试试这个代码段。它只会在每个元素之后断开循环。

＆＃13;

$("button").click(function(e){
    $("p").not('.blue').each(function(){
        $(this).addClass('blue');
        return false;
    });
});

＆＃13;

.blue {
  color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Add</button>
<p>App </p>
<p>App </p>
<p>App </p>
<p>App </p>
<p>App </p>
<p>App </p>
<p>App </p>
<p>App </p>
<p>App </p>

＆＃13;

如何不一次AddClass到元素？

2 个答案: