Question

我现在正在创建一个网站，其中包含多个部分，其中的元素显示为＆＃34; cascade＆＃34;风格（一个接一个，延迟之间）。这就是我这样做的方式：

setTimeout(function(){
         $('nav .icon-hola').toggleClass('colorHigh');      },300);     
      setTimeout(function(){
         $('nav .icon-progra').toggleClass('colorHigh');      },400);          
      setTimeout(function(){
         $('nav .icon-sistemas').toggleClass('colorHigh');      },500);       
      setTimeout(function(){
         $('nav .icon-equipo').toggleClass('colorHigh');       },600);   
            setTimeout(function(){
         $('nav .icon-clases').toggleClass('colorHigh');      },700); 
      setTimeout(function(){
         $('nav .icon-social').toggleClass('colorHigh');      },800);       
      setTimeout(function(){
         $('nav .icon-contacto').toggleClass('colorHigh');       },900);

有没有办法创建某种循环，在这种情况下，每隔100毫秒就会给每个$('nav [class^=icon-]') .addClass('colorHigh')方法一次？

如果有，通过我正在做的方式或其他方式来做它是否更可靠？两者都需要相同的资源，或者其中一个需要更多负载才能应用？

Answer 1

这将完成工作：

已编辑的代码

var delay=100;
$('nav [class^=icon-]').each(function(counter){
    //counter will start from 0..
    timeout = delay * (counter + 1);
    var selector = $(this);
    setTimeout(function(){
         selector.toggleClass('colorHigh');
    }, timeout);
});

DEMO

Answer 2

它肯定能为您节省一些代码，

http://jsbin.com/yujujucoviqi/1/edit

var delay = 300;
var targetSelectors = [
  'nav .icon-hola',
  'nav .icon-progra',
  'nav .icon-sistemas'
];
function showInDelay(targetSelectors, delay, incrementDelayBy){
  if(!incrementDelayBy){
    incrementDelayBy=100;
  }
  var elems = [];
  if($.type(targetSelectors)==="string"){
    elems = $(targetSelectors);
  }else{
    elems = $(targetSelectors.join());
  }
$(elems).each(function(index,selector){
  setTimeout(function(){console.log(selector);
         $(selector).toggleClass('colorHigh');      
  },delay+=incrementDelayBy);
});  

}

    /*call this for as many selectors eg nav bars you require*/
showInDelay(targetSelectors, delay);

/*or with a selector*/
//showInDelay("nav [class^=icon-]", delay);

Answer 3

这是一个你可以使用的递归方法：

function toggleTimed(els, time){
    var el = [].shift.call(els)
       ,fn = function () {
               $(el).toggleClass('colorHigh'); 
               if (els.length) {toggleTimed(els,time);}
             };
    if (el) { setTimeout(fn, time);}
}

用法可能类似于：

toggleTimed($('[class^=icon]'),400);

以下是jsFiddle

中的简单演示

jQuery循环一个“添加类”方法，延迟时间间隔

3 个答案: