如何调整这个jquery键盘导航以允许其他标签和键盘功能

How can one adjust this jquery keyboard navigation to allow other tags and keyboard functions?

本文关键字：键盘 许其他 其他 标签 功能 导航 何调整 调整 jquery      更新时间：2023-09-26

我正在创建一个简单的网站，图像垂直向下运行的页面。我希望能够通过键盘箭头键平滑图像之间的滚动。通过这个论坛的帮助，我收到了以下建议(确实有效)。

示例:http://jsfiddle.net/aVvQF/5/

问题:如何使用方向键在页面上的对象之间平滑地上下滚动?

但是，我需要一些额外的功能。此设置防止所有键盘功能的默认操作。我只希望更改左箭头键和右箭头键的默认操作。我决定使用左右，而不是上下，这样标准的上下箭头导航和页面上下就不会受到影响。如何更改代码以允许使用除左箭头和右箭头以外的所有键?

同样，这种设置似乎只有在'img'标签之间没有其他标签时才有效。然而，我需要能够放置链接，文本和断行之间或周围的图像。如何调整代码以允许这种情况?或者，它会更好地把图像和必要的文本和链接每个在'div'类运行的页面(现在它都在一个'div')，然后有键盘导航之间的'div' ?

谢谢。

你应该像下面这样做，允许所有其他键，除了左方向键和右方向键在你的函数开始-> 

var keyCode = e.keyCode;
//return if it is not left/right arrow key
if (keyCode != 39 && keyCode != 37) {
    return;
}

我修改了你的html和脚本一点，使其工作。查看我的方法jsFiddle在这里

next()和next([selector])的工作方式不同。前者next只是获取下一个兄弟元素，而后者则首先尝试获取匹配列表(在您的示例中为$('.active')，并从中选择下一个匹配元素(该元素为0)。

例如

 <p class="selected active">Hello Again</p>
 <span class="log" >Test</span>
 <p class="selected">Hello Again</p>
 <div><span>And Again</span></div>

这个$("p.selected.active").next('p.selected')看起来像是要去取下一个选中的p，但它不是。在我看来，jQuery通过$("p.selected.active")迭代找到匹配的'p.selected'，这将返回空。

我使用.next()并添加了一个where子句来查找兄弟元素中的下一个img标签，

 $targetElement = $('.active').next();
 while ($targetElement.length != 0 && $targetElement.hasClass('img') == false) {
       $targetElement = $targetElement.next();
 }

我希望它有帮助

编辑:

检查这里。

  1. 添加isAnimating标志，以避免滥发keydown。
  2. 修改css .active img{ border: 2px dotted red; } .
  3. 稍微修改了一下html

如何更改代码以允许使用除左箭头和右箭头以外的所有键?

只有当左/右键匹配时才调用e.preventDefault();

如何调整代码以允许这种情况?

您应该能够用容器div包围每组数据，并更改代码以查找div而不是图像。

示例:http://jsfiddle.net/KnKC9/1/

相关文章：