jquery - 使用左右箭头键进行额外导航

Question

我想添加访问者使用具有跨浏览器兼容性的左右箭头键在照片页面之间导航的功能。

我现有的 HTML 已经有 Back 和 Next 链接。我需要做什么才能让左键触发 <%=previousLink%> 和右键触发 <%=nextLink%>？

<div class="full-size-image-nav">
    <%if previousNumber <> 0 then%>
        <div class="previous">
            <p><a href="<%=previousLink%>">Back</a></p>
        </div>
    <%end if%>
    <%if nextNumber <> 0 then%>
        <div class="next">
            <p><a href="<%=nextLink%>">Next</a></p>
        </div>
    <%end if%>
</div>

我见过jQuery Event Keypress：哪个键被按下？，但不知道如何使其适应我的代码。谢谢你。

Answer 1

检查这个，DEMO http://jsfiddle.net/qRqNf/1/

首先单击结果框，然后尝试按左/右键。

$(document).ready(function () {
    $("body").keydown(function(e) {
      if(e.which == 37) { // left     
          $(".previous a").trigger("click");
      }
      else if(e.which == 39) { // right     
          $(".next a").trigger("click");
      }
    });
    $(".previous a").on("click",function(){
        // your scripts for previous click here
        window.location = 'http://www.google.com';  
    });
    $(".next a").on("click",function(){
        // your scripts for next click here
        window.location = 'http://sg.yahoo.com/';   
    });
});