使用按键单击锚标记

Question

要滚动浏览基于 Laravel 的 Web 应用程序的内容，屏幕左右两侧都有箭头（锚标记）。

代码

<a href="/" id="ContentLeft"><span class="fa fa-angle-left"></span></a>

<a href="/" id="ContentRight"><span class="fa fa-angle-right"></span></a>

JSFiddle

问题： 我想通过按键盘上的左右箭头键（键码 37 和 39）来单击这些锚点

互联网搜索结果： 我找到了一段可能接近解决方案的文本框和按钮组合的代码，但是，这不起作用，因为没有文本框，只有一个锚标记。

<script>
$(document).ready(function(){
    $('#TextBoxId').keypress(function(e){
      if(e.keyCode==37)
      $('#buttonId').click();
    });
});
</script>

非常感谢您的帮助！

Answer 1

当使用 jQuery 时，我更喜欢使用 .which 而不是 .keyCode。

那我不知道为什么它不适用于keypress...但它适用于keyup。

你必须有一个元素来绑定事件。因此，如果您愿意，可以将其绑定到整个文档...

$(document).ready(function(){
  $(this).keyup(function(e){
    if(e.which==37){
      $('.fa-angle-left').click();
    }
    if(e.which==39){
      $('.fa-angle-right').click();
    }
  });
  
  // Just to console.log something here...
  $(".fa-angle-left").on("click",function(){
    console.log("Left clicked.");
  });
  $(".fa-angle-right").on("click",function(){
    console.log("Right clicked.");
  });
});

.arrow-leftright {
  color: dimgray;
  position: fixed;
  padding: 10px;
  vertical-align: middle;
  margin-bottom: 0;
  height: 70vh; 
  width: 25vw; 
  font-size: 60px; 
  line-height: 70vh; 
}

.arrow-leftright:focus, .arrow-leftright:hover {
  color: lightgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<a href="#" id="leftPicture" class="arrow-leftright" style="left: 0; text-align: left;"><span class="fa fa-angle-left"></span></a>

<a href="#" id="rightPicture" class="arrow-leftright" style="right: 0; text-align: right;"><span class="fa fa-angle-right"></span></a>