1

我试图使用 jQuery 的 trigger() 方法将箭头导航应用于图像库。

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

在这个 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");   
});
4

1 回答 1

0

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

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

在您的情况下，您需要设置src.<iframe>

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

$("#selection a").click(function(e) {
    var $a = $(this);
    e.preventDefault();
    $a.parent().addClass('selected').siblings().removeClass('selected');
    $('iframe[name=iframeload]').prop('src', $a.attr('href'));
    $("#debug").text( $a.attr("href") +" was just clicked");   
});
于 2013-03-13T22:02:49.303 回答