switchable 如果没有在初始化的时候指定唯一的 element 参数引发的问题。

[X-Bird]

1. 我的页面有12组需要轮播的地方，都是相同的dom结构
2. 一开始我是这样初始化的

  $('.the-same-top-class').each(function(index, element) {
    new Switchable({
        panels: $(element).find('.content'),
        triggers: $(element).find('.triggers'),
        activeTriggerClass: 'trigger-selected',
        autoplay: true,
        circular: true,
        interval: 2500,
        effect: 'scrollx',
        duration: 300,
        delay: 500
    }).render();
    ...
 })

，因为switchable 的 triggers 参数 和 pannels 参数除了接受 字符选择器之外还支持jQuery数组，所以我是传入了数组，因为dom结构都一样，要是传入字符选择器的话会混乱
3. 但是页面初始化成功之后轮播在没有发生页面滚动的时候是正常的
4. 页面发生滚动后，轮播就不再自动播放了
5. debug源码之后发现，问题出现在 ’arale/switchable/1.0.2/plugins/autoplay-debug‘ 的 install 函数里面
6. 问题代码在这里

 // 滚出可视区域后，停止自动播放
            this._scrollDetect = throttle(function() {
                console.log($(element).html());
                console.log(isInViewport(element) ? "start" : "stop");
                // 不自动播放的时候，输出这里的element，指向的不是轮播的 viewport ，而是一个空的 div
                that[isInViewport(element) ? "start" : "stop"]();
            });

1. 在页面有多个相同结构的dom需要用到switchable的时候，初始化switchable的时候如果没有明确的指定 element 参数，则这里的 element 会指向一个空的div，导致页面一旦发生滚动，这个 that[isInViewport(element) ? "start" : "stop"](); 会一直返回 stop ，因为那个空的 div 根本就不在 viewport 里。
2. 翻开官方文档 http://aralejs.org/switchable/#配置说明 配置说明里也没有 element 这个参数说明
3. 只有这里才有 http://aralejs.org/switchable/#tabs-普通标签页 关于 element 这个参数的说明
4. 综上所述，当页面有多个相同结构 dom 需要用 js 初始化 switchable 这个组件的时候，除了 triggers pannels 这两个参数需要唯一之外，还需要指定对应的 父级 element 参数，要不自动播放会失效，不知道是不是个 bug ，此坑已踩，望加文档或修正，避免他人再踩。

[zenxds]

arale组件element跟template总要传1个的，是你不熟悉arale的widget机制