添加鍵盤上的箭頭導航自定義JS

Question

我使用WordPress和我的內容是這樣的

<div class="image-wrap"><a class="ajax-load-next" href="http://linktopage.com/2/"><img src="blah1.jpg" alt=""/></a></div><!--nextpage--> 
<div class="image-wrap"><a class="ajax-load-next" href="http://linktopage.com/3/"><img src="blahab.jpg" alt=""/></a></div><!--nextpage--> 
<div class="image-wrap"><a class="ajax-load-next" href="http://linktopage.com/4/"><img src="blahco.jpg" alt=""/></a></div><!--nextpage--> 
<div class="image-wrap"><a class="ajax-load-next" href="http://linktopage.com/5/"><img src="blahneat.jpg" alt=""/></a></div> 

我有當用戶點擊了圖片加載下一個圖像的自定義JavaScript。現在我想將左邊的&右鍵盤箭頭導航添加到這個腳本中，我不知道如何實現它，因爲我不熟悉JavaScript。

$('body').on('click', '.image-wrap', function(e) { // listen for 'click' on our '.image-wrap' element 
    e.preventDefault(); // Prevents default behavior on the a element 

    $.ajax({ 

    url: $(this).find('a').attr('href'), // the url we are fetching by ajax 
    success: function (response) { 

     newImg = $(response).find('.image-wrap').html(), // get the new href link and image from the response, contained in div.image-wrap 

     $('div.image-wrap').html(newImg); // set the new html for our inner div 

    } 
    }).fail(function (data) { 

    if (window.console && window.console.log) { 

     console.log(data); // log failure to console 

    } 

    }); 

}); 

編輯： 按下右箭頭鍵我希望它點擊AJAX鏈接，裏面像包裝的div應加載下一個圖像。如果按下左箭頭鍵，它應該返回到前一個圖像。任何想法如何做到這一點？

Answer 1

您可以使用捕鼠器。

function GoToLocation(url) 
 
    { 
 
    window.location = url; 
 
    } 
 
    Mousetrap.bind("right", function() { 
 
document.getElementById('next-image').click(); 
 
    });

<script src="https://craig.global.ssl.fastly.net/js/rainbow-custom.min.js?39e99"></script> 
 
<script src="https://craig.global.ssl.fastly.net/js/mousetrap/mousetrap.js?bc893"></script> 
 

 
<div class="image-wrap"><a id="next-image" class="ajax-load-next" href="http://linktopage.com/2/"><img src="blah1.jpg" alt=""/></a></div><!--nextpage--> 
 
<div class="image-wrap"><a id="next-image" class="ajax-load-next" href="http://linktopage.com/3/"><img src="blahab.jpg" alt=""/></a></div><!--nextpage--> 
 
<div class="image-wrap"><a id="next-image" class="ajax-load-next" href="http://linktopage.com/4/"><img src="blahco.jpg" alt=""/></a></div><!--nextpage--> 
 
<div class="image-wrap"><a id="next-image" class="ajax-load-next" href="http://linktopage.com/5/"><img src="blahneat.jpg" alt=""/></a></div>

，如果你是使用attachment.php或image.php基於畫廊。你也可以用這個：Wordpress Attachment Page Navigate with Keyboard

Answer 2

您需要將處理程序綁定到文檔keyup事件，並測試事件的關鍵代碼。一個方便的參考鑰匙代碼：https://css-tricks.com/snippets/javascript/javascript-keycodes/

下面是一個例子。運行它時，在測試密鑰之前，請單擊輸出面板以使其焦點集中。

var selectedIndex = 0; 
 

 
var elements = $('.navigable').toArray(); 
 
var maxElements = elements.length; 
 

 
function nextSelection() { 
 
    selectedIndex++; 
 
    if(selectedIndex >= maxElements) { 
 
    selectedIndex = 0; 
 
    } 
 
    selectElement(); 
 
} 
 

 
function prevSelection() { 
 
    selectedIndex--; 
 
    if(selectedIndex < 0) { 
 
    selectedIndex = maxElements - 1; 
 
    } 
 
    selectElement(); 
 
} 
 

 
function selectElement() { 
 
    $('.navigable').removeClass('selected'); 
 
    $(elements[selectedIndex]).addClass('selected'); 
 
} 
 

 
handleKeyUp = function(ev) { 
 
    if(ev.keyCode == 37) { // left arrow key 
 
    prevSelection(); 
 
    } 
 
    if(ev.keyCode == 39) { // right arrow key 
 
    nextSelection(); 
 
    } 
 
    if(ev.keyCode == 27) { // escape key 
 
    $(document).off('keyup', handleKeyUp); 
 
    } 
 
} 
 

 
$(document).on('keyup', handleKeyUp); 
 
selectElement();

div { 
 
    padding: 30px; 
 
    margin: 10px; 
 
    border: 1px solid #aaa; 
 
    background: #fee; 
 
    display: inline-block; 
 
} 
 

 
div.selected { 
 
    background: #faa; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navigable">1</div> 
 
<div class="navigable">2</div> 
 
<div class="navigable">3</div> 
 
<br> 
 
<br> 
 
<p> Click in this panel to give it focus. Use arrow keys to navigate between divs. Press `ESC` to disable `keyup` handler.</p>