将键盘箭头导航功能添加到自定义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

    }

  });

});

编辑： 按下右箭头键，我希望它可以点击在image-wrap div内部的ajax链接，这将载入下一张图片。如果按下左箭头键，则应返回上一张图片。有任何想法如何实现此功能吗？

- TravelWhere

---

还不清楚。箭头键应该作用于哪个图像包装div？你有四个。 - Bill Doughty

在WordPress上，页面上只会显示一个image-wrap div，因为<!--nextpage-->标签会将这些div分成多个页面。因此，箭头键应该聚焦于页面上的一个image-wrap div。 - TravelWhere

Answer 1

你可以使用 mousetrap。

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附件页面。

- ceylankral

---

左箭头键怎么样？我希望它可以返回上一页/图片。 - TravelWhere

你能给我展示一个示例页面吗？这样我就可以写一些相关内容了。 - ceylankral

可以。但是你还需要在这里编写关于图片库页面的PHP代码。这是HTML打印的代码。你必须编写PHP源代码。 - ceylankral

我并没有使用任何自定义的 PHP。这只是一个标准的 WordPress 文章，使用 <!--nextpage--> 标签将内容分成多个页面，并嵌入了自定义 JavaScript。 - TravelWhere

我无法帮助你解决这个问题，很抱歉。但是我建议你可以使用默认的WordPress图库，并且你可以按照以下步骤操作：链接。 这里有一个可行的示例（使用右箭头和左箭头）：链接。 - ceylankral

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>

- Bill Doughty

---

你的脚本似乎只选择div元素，但我想用箭头键单击图像链接或返回上一个图像链接。我该怎么做？ - TravelWhere

你想让哪些箭头键做什么？你说你想要箭头键导航。我的答案展示了如何处理keyup事件的通用示例。你选择如何处理keyup事件取决于你想要做什么，这还不清楚。请在你的问题中描述一个完整的场景，并详细说明当用户按下给定的箭头键之前和之后点击你的ajax链接时应该发生什么。 - Bill Doughty