在自定义js中添加键盘箭头导航

Adding keyboard arrow navigation to custom js

本文关键字：导航 键盘 添加 自定义 js      更新时间：2023-09-26

我使用的是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，当用户单击图像时加载下一个图像。现在我想添加left &右键盘箭头导航到这个脚本，我不知道我怎么能实现它，因为我不熟悉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应该加载下一个图像。如果按下左箭头键，它应该回到以前的图像。知道怎么做吗?

可以使用捕鼠器

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附件页面导航与键盘

您需要将处理程序绑定到文档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>

相关文章：