1

jQuery の trigger() メソッドを使用して、画像ギャラリーに矢印ナビゲーションを適用しようとしていました。

別のstackoverflowユーザーからその例を入手しましたが、問題ないように見えましたが、リスト項目に実際のリンクを追加すると、矢印キーが押されたときではなく、クリックされたときにのみ読み込まれました。

この JSfiddle では、最後の 2 つのリスト項目 "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 に答える