0

我正在使用 WordPress 中的热键功能在项目中创建键盘导航。虽然键盘功能可以正常工作，但由于某种原因，它只会滚动到下一个项目，而不是转到上一个项目。当我用鼠标物理单击箭头时，一切正常，但由于某种原因，使用键盘时它不起作用。

这是一个项目的链接

http://geoffgeoff.com/dialect-skateboards-identity/

这是我的js代码

$(document).ready(function () {

    // This uses the Hotkeys jQuery plugin. See below for
    // the native jQuery alternative.
    $(document).bind('keydown', 'left', function() {
        var url = $('#left_arrow a').attr('href');
        if (url) {
            window.location = url;
        }
    });
    $(document).bind('keydown', 'right', function() {
        var url = $('#right_arrow a').attr('href');
        if (url) {
            window.location = url;
        }
    });

});
4

1 回答 1

0

您不能以这种方式分配密钥。实际上，您将这两个函数绑定到 global-keydown-event，第二个函数会覆盖第一个函数。在访问您的网站时尝试按任意键 - 每个键都会加载下一篇文章。

正确的方法是检测函数内部按下的键，然后触发点击正确的锚元素：

$(document).bind('keydown', function (evnt) {

    var elem = evnt.keyCode === 37 // left arrow
        ? '#left_arrow a'
        : evnt.keyCode === 39 // right arrow
        ? '#right_arrow a'
        : false;

    if ( !elem ) {
        return;
    }

    $(elem).trigger('click');

});

如果 keyCode 为 37，则按下左箭头，如果 keyCode 为 39，则按下右箭头。通过使用三元运算符，如果既没有单击左键也没有单击右键，可以将 false 分配给 elem 变量。在这种情况下，函数返回 false 并且没有任何反应。

否则，左锚或右锚的点击事件被触发。

于 2012-06-24T15:17:48.057 回答