添加键盘上的箭头导航自定义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>