将键盘箭头导航添加到自定义 js

Posted 2023-04-13

【中文标题】将键盘箭头导航添加到自定义 js

【英文标题】：Adding keyboard arrow navigation to custom js

【发布时间】：2016-12-31 00:01:38

【问题描述】：

我正在使用 wordpress，我的内容看起来像这样

<div class="image-wrap"><a class="ajax-load-next" href="http://linktopage.com/2/"><img src="blah1.jpg" /></a></div><!--nextpage-->
<div class="image-wrap"><a class="ajax-load-next" href="http://linktopage.com/3/"><img src="blahab.jpg" /></a></div><!--nextpage-->
<div class="image-wrap"><a class="ajax-load-next" href="http://linktopage.com/4/"><img src="blahco.jpg" /></a></div><!--nextpage-->
<div class="image-wrap"><a class="ajax-load-next" href="http://linktopage.com/5/"><img src="blahneat.jpg" /></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 链接，该链接应该加载下一个图像。如果按左箭头键，它应该返回到上一个图像。知道怎么做吗？

【问题讨论】：

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

在 wordpress 上它只会在页面上显示一个图像包装 div，因为 标签会将这些 div 拆分为多个页面。所以箭头键应该专注于页面上的一个图像包装 div

【参考方案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" /></a></div><!--nextpage-->
<div class="image-wrap"><a id="next-image" class="ajax-load-next" href="http://linktopage.com/3/"><img src="blahab.jpg" /></a></div><!--nextpage-->
<div class="image-wrap"><a id="next-image" class="ajax-load-next" href="http://linktopage.com/4/"><img src="blahco.jpg" /></a></div><!--nextpage-->
<div class="image-wrap"><a id="next-image" class="ajax-load-next" href="http://linktopage.com/5/"><img src="blahneat.jpg" /></a></div>

如果您使用的是基于附件.php 或 image.php 的图库。你也可以使用这个：Wordpress Attachment Page Navigate with Keyboard

【讨论】：

左箭头键呢？我希望它返回一个页面/图像

你能给我看一个示例页面吗？所以我可以写任何关于它的东西。

没关系。但您也必须在此处编写有关您的图片库页面的 php 代码。它的 html 打印代码。你必须写php源代码。

我并没有真正使用任何自定义 php。这只是一个标准的 wordpress 帖子，使用 标签将内容拆分为多个页面并嵌入自定义 javascript

我无法为您提供帮助。抱歉。但我建议，您可以使用默认的 wordpress 库。你可以这样做：link。这是工作示例（使用左右箭头键）：link

【参考方案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>

【讨论】：

您的脚本似乎只选择了 div，但我希望箭头键单击图像链接或返回上一个图像链接。我该怎么做？

你想用哪个箭头键来做什么，究竟是什么？你说你想要箭头键导航。我的回答显示了如何通过一个一般示例来处理 keyup 事件。您选择如何处理 keyup 事件，取决于您要执行的操作，目前尚不清楚。请在您的问题中描述一个完整的场景，详细说明当用户在单击您的一个 ajax 链接之前和之后按下给定箭头键时会发生什么。