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

    }

  });

});

修改通过按右箭头键我希望它单击图像包装div内的ajax链接，该链接应加载下一个图像。如果按左箭头键，它应该返回上一个图像。知道怎么做吗？

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>

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

2 个答案: