Question

让我们看一下这个脚本，它是一个简单的转盘

$script = {
   init: function(){
      this.heros(3000);
   },
   heros: function (time) {
        var t;
        var $hero = $('.hero');
        var $images = $('.hero > div');
        $hero.data('current', 0);
        var $bullets = $('<div>').addClass('bullets');
        for ( var i = 0; i<$images.length; i++ ) {
            var $item = $('<span>');
            $item.on('click', function () {
                clearTimeout(t);
                play( $(this).index() );
            });
            if(i==0) { $item.addClass('active') }
            $bullets.append( $item );
        }
        var play = function (current) {
            if(current==undefined) {
             current = $hero.data('current');
            }
            var nextMargin;
            if ( (current+1) == $images.length ) {
                nextMargin = 0  ;
                $hero.data('current',0);
            } else {
                nextMargin = (current + 1 )*100;
                $hero.data('current', (current + 1));
            }   

            $images.eq(0).css('marginLeft', -nextMargin + '%'); 
            $bullets.find('span').eq($hero.data('current')).addClass('active').siblings().removeClass('active');
            clearTimeout(t);
            t = setTimeout(play, time);
        }
        $hero.append($bullets);
        t = setTimeout(play, time);
    },
}

事情是，它的效果很好，但前提是只有一个.hero元素..如果有多个子弹混淆而且它不尊重.length

我知道选项一应该重写一次，但你们中有没有人看到一个可以重复使用的快速解决方案吗？

一个小提琴：https://jsfiddle.net/6z8n5pnq/ 多个小提琴：https://jsfiddle.net/6z8n5pnq/1/

- 编辑 -

我试过了：

定义在init

上调用的上一个函数

preheros: function(time) {
        var self = this;
        $('.heros').each(function(){
            self.heros($(this), time);
        });
},

编辑英雄的开始：

heros: function ($hero, time) {
        var t;
        /*var $hero = $('.hero');*/
        var $images = $hero.find('>div');

但没有成功......

任何想法？

- 编辑 -

上帝，它是$('.hero').each而非$('.heros').each它正在运作！

Answer 1

最简单的方法是使用.hero函数隔离每个$(selector).each组件的上下文。略微纠正了你的小提琴https://jsfiddle.net/6z8n5pnq/2/

function apply($hero, time){
   var t;       
   var $images = $hero.children('div');
  //all your logic here...
}

$script = {
    init: function () {
        this.heros(3000);
    },
    heros: function (time) {
        $('.hero').each(function(){
            apply($(this), time);
        });
    },
}

转换脚本以处理多个实例

1 个答案: