javascript - 多个 jQuery slider : How to disable keyboard navigation for all but one slider?

Question

我在单个页面上有六个 slider ，每个 slider 都在自己的部分中。当您滚动时， View 中的部分会获得一个 CSS 类“active”。我正在尝试为除事件部分中的 slider 之外的每个 slider 禁用键盘导航。

我当前的代码如下所示:

$('section').not('.active').on('keydown', function(e){
    if(e.keyCode === 37 || e.keyCode === 39) {
        e.preventDefault();
        return false;
    }
});

没用。他们都动了。我的选择器错了吗？有没有更好的方法来禁用一组元素的左右键盘导航？

我正在使用 Unslider .

Answer 1

看起来 keydown 事件被分配给了 document 所以首先你必须取消绑定(bind)插件分配的现有事件并绑定(bind)一个新的 keydown 事件来改变幻灯片在 next 和 prev 上。

如果您已使用 $('.banner').unslider();(即用于选择所有 slider 的 css 选择器)来初始化 slider ，则以下代码将完成此工作

$(function() {
    var banners = $('.banner');
    banners.unslider();
    $(document).unbind('keydown').keydown(function(e){
        var index = banners.index($('.active')[0]) + 1;
        var data = $('.active').data('unslider'+index);

        if(e.keyCode === 37 ) {
            e.preventDefault();
            data.prev();
            return false;
        }
        if(e.keyCode === 39 ) {
            e.preventDefault();
            data.next();
            return false;
        }
    });
});

样本 FIDDLE

更新

我在事件横幅的选择器中做了一个小修正

FIDDLE

如您所见，我已将 $('.active') 更改为 $('div.active')

我建议你输入一个非常具体的类名，而不是 active

您甚至可以将 $('div.active') 替换为 $('div.portfolio-slider.active')