Question

我在一个页面上有六个滑块，每个滑块都在自己的部分中。滚动时，视图中的部分会获得一个“活动”的CSS类。我正在尝试为除活动部分中的滑块之外的每个滑块禁用键盘导航。

我目前的代码如下：

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

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

我正在使用Unslider。

Answer 1

看起来keydown事件已分配给document，因此首先您必须取消绑定插件分配的现有事件，并绑定一个新的keydown事件，该事件会更改next上的幻灯片和prev。

如果您使用$('.banner').unslider();（即.css选择器选择所有滑块）来初始化滑块，那么以下代码将完成这项工作

$(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')

Answer 2

感谢Cerlin Boss的帮助！这是我最终使用的解决方案，包括适用于多滑块页面上各个滑块的箭头导航：

form_columns

正如Cerlin Boss指出的那样，关键是取消绑定keydown事件，然后重新绑定它们以仅定位具有特定类的滑块，在我的情况下是活动的＆＃39;。希望这有助于某人！

多个jQuery滑块：如何为除一个滑块之外的所有滑块禁用键盘导航？

2 个答案: