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。

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

＆＃13;

$(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.");
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

使用按键单击锚标记

1 个答案: