Question

我试图使用jQuery的trigger（）方法将箭头导航应用到图库中。

我从另一个stackoverflow用户那里得到了一个例子，它看起来很好但是当我添加到列表项的真实链接时，它们只会在点击时加载，而不是在按下箭头键时加载。

In this JSfiddle最后两个列表项“apple”和“microsoft”有真正的链接，当它们被箭头键激活时，它们应该将页面加载到iFrame上，但它们却没有。它们只有在点击时才能正常工作。

如何使按键等于点击次数？

var chosen = "";
$(document).keydown(function(e){ // 38-up, 40-down
    chosen = $('li.selected').index(); //grab the current selection
    if (e.keyCode == 40) { 
        if(chosen === "") {
            chosen = 0;
        } else if((chosen+1) < $('li').length) {
            chosen++; 
        }
        selectImage(chosen);
        return false;
    }
    if (e.keyCode == 38) { 
        if(chosen === "") {
            chosen = 0;
        } else if(chosen > 0) {
            chosen--;            
        }
        selectImage(chosen);
        return false;
    }
});

function selectImage(whichIndex) {
    $('li:eq('+whichIndex+') a').trigger("click");
}
$("#selection a").click(function() {
    $('li').removeClass('selected'); 
    $(this).parent().addClass('selected');

    $("#debug").text( $(this).attr("href") +" was just clicked");   
});

Answer 1

.trigger()函数只会导致您使用jQuery附加的处理程序方法执行。它不会导致执行<a>元素的正常行为。也就是说，它不会加载<iframe>。

您可以使用e.preventDefault()来阻止<a>元素执行其默认行为，并添加明确执行它的代码。这样，它将在单击它和调用.trigger()时执行。

在您的情况下，您需要设置src的{{1}}属性。

尝试将事件处理程序更改为：

<iframe>

应用于箭头键的jQuery单击触发器不起作用

1 个答案: