jQuery合并不同选择器的函数

时间:2014-06-18 08:23:51

标签: javascript jquery html5

我有一个简短的脚本,可以在doc上更改几个类,我为两个不同的选择器运行这个脚本,脚本是相同的,所以想知道是否有一种方法可以将它压缩成更短的代码?

jQuery(document).ready(function($){

    var list1 = $('#slides .links li');
    $(list1).filter(':first').addClass('active');

    setInterval(function() {
        if( $(list1).filter('.active').index() !== $(list1).length - 1 ) {
            $(list1).filter('.active').removeClass('active').next().addClass('active');
        }
        else {
            $(list1).removeClass('active').filter(':first').addClass('active');
        }
    }, 4000);

    var list2 = $('#slides .pics li');
    $(list2).filter(':first').addClass('active');

    setInterval(function() {
        if( $(list2).filter('.active').index() !== $(list2).length - 1 ) {
            $(list2).filter('.active').removeClass('active').next().addClass('active');
        }
        else {
            $(list2).removeClass('active').filter(':first').addClass('active');
        }
    }, 4000);
});

如果有人会用来压缩这个方法的名称,我会查找并重新编写。非常感谢。

2 个答案:

答案 0 :(得分:3)

尝试为此创建一个通用函数并单独调用它,

function timer(list) {
  list.filter(':first').addClass('active');
  setInterval(function() {
        if(list.filter('.active').index() !== list.length - 1 ) {
            list.filter('.active').removeClass('active').next().addClass('active');
        }
        else {
            list.removeClass('active').filter(':first').addClass('active');
        }
  }, 4000);
}

timer($('#slides .links li'));
timer($('#slides .pics li'));

答案 1 :(得分:1)

由于每个列表都有:首先,我会做

$(function() {

  var $list = [$('#slides .links li),$('#slides .pics li')];
  $list.each(function() { this.filter(':first').addClass('active')});

  setInterval(function() {
    $list.each(function() {
      if(this.filter('.active').index() !== this.length - 1 ) {
        this.filter('.active').removeClass('active').next().addClass('active');
      }
      else {
       this.removeClass('active').filter(':first').addClass('active');
      }
    });
  }, 4000);
});