Question

所以我有一堆div元素，我想要添加一个类，所以它会触发一个转换 - 但是我想要一次添加1个类，而不是同时添加，所以动画一次出现1个

这就是我的javascript的样子。

var campaignInfo = document.querySelectorAll(".campaign-info-container");

setTimeout(function(){
    for(i=0; i<=campaignInfo.length;i++){
        campaignInfo[i].classList.add("campaign-container-slide");
        console.log(campaignInfo[i]);
    };  
}, 2000);

所以基本上我使用querySelectorAll，所以它捕获了该类的所有div，当我console.log()时它出现。

但是，如果没有延迟添加类，我不确定如果2000 * i仅在循环内定义，我怎么能将迭代添加到毫秒i。我尝试在var counter;之外创建setTimeout，然后使用counter++在循环内增加setInterval，但延迟仍然无法正常工作。

此外，我收到此错误＆＃34;无法读取未定义的属性classList。

谢谢你们。哦，请不要jQuery：）

编辑：

感谢您的解决方案！：）

for在你的情况下是否像循环一样工作？

因为我希望每当我点击一个按钮时都会出现这个间隔，但是当我退出框架时会被删除。所以我添加了以下内容从元素中删除类。但我使用for(i=0; i<=campaignInfo.length; i++){ campaignInfo[i].classList.remove("campaign-container-slide"); }循环代替..

fb.login({scope:'email'}).then(function (resp) {
    if (resp.status === 'connected') {
       fb.api('/me', 'get', {fields:'id,email,first_name,gender,...'}).then(function (response) {
          alert('You have successfully logged in, ' + response.name + ", " + response.email + "!");
       });
    }
});

这是有效的，但我只是好奇我的第一个初始代码（上面没有这个代码）是如何工作的？怎么用计数器工作但不循环呢？

Answer 1

如果我理解正确，您可以使用嵌套setTimeout来电，或使用setInterval：

＆＃13;

var campaignInfo = document.querySelectorAll(".campaign-info-container");
var index = 0; // The index of the next `campaignInfo` div to update
var interval = setInterval(function() { // Create a new interval that fires every 500ms
  campaignInfo[index++].classList.add("campaign-container-slide");
  if (index === campaignInfo.length) { // The last div has been reached, so...
    clearInterval(interval); // Clear the interval using the reference
  }
}, 500);

＆＃13;

body { font-size: 2em;}
.campaign-info-container { background: #555; }
.campaign-container-slide { background: #eee; }

＆＃13;

<div class="campaign-info-container">One</div>
<div class="campaign-info-container">Two</div>
<div class="campaign-info-container">Three</div>
<div class="campaign-info-container">Four</div>

＆＃13;

使用setTimeout延迟向元素添加类？

1 个答案: