Question

我正在使用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;
        }
    });

});

Answer 1

你无法以这种方式分配密钥。实际上你将这两个函数绑定到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，则按下右箭头。通过使用三元运算符，如果单击左侧和右侧，则可以为elem变量赋值false。在这种情况下，函数返回false并且没有任何反应。

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

jQuery热键与WordPress的下一篇文章

1 个答案: