Bàn phím Bind để điều hướng bên trái/bên phải

Question

Tôi là nhiếp ảnh gia và có trang web nơi tôi không thể chỉnh sửa cấu trúc 'mẫu' nhưng có thể tải lên javascript/css, v.v.

Tôi muốn ràng buộc điều hướng tiếp theo/trước bàn phím phải/trái.

Cấu trúc của liên kết là:

<div class="image_navigation"> 
     <h4>Image Navigation</h4> 
     <ul> 
     <li class="index"><a href="LINKURL">Index</a></li> 
     <li class="previous"><a href="LINKURL">Previous</a></li> 
     <li class="next"><a href="LINKURL">Next</a></li> 
     </ul> 
    </div> 

tôi gọi this và quản lý để tạo này.

$(function() {$(document).keyup(function(e) { 
switch(e.keyCode) { case 37 : window.location = $('li.prev').attr('href'); break; 
    case 39 : window.location = $('li.next').attr('href'); break; }});}); 

Đây là nơi tôi bị kẹt. Nó không hoạt động vì nó giả định rằng tôi đang chỉ định một thẻ href nhưng tôi đang nói đến li chứa nó.

Bất kỳ ý tưởng nào cũng sẽ được đánh giá cao!

Answer 1

window.location = $('li.next a').attr('href'); 

Answer 2

$(function() {$(document).keyup(function(e) { 
switch(e.keyCode) { case 37 : window.location = $('li.prev a').attr('href'); break; 
case 39 : window.location = $('li.next a').attr('href'); break; }});}); 

$ ('li.next') nhắm vào tất cả các mục danh sách với lớp của 'bên cạnh', và đó là nó - đó là không biết gì về nội dung của các mục trong danh sách.

Nếu bạn muốn href của thẻ, bạn cần phải đi sâu hơn một chút ($ ('li.next a') hoặc $ (li.next '). Find (' a ')) - tên gốc của bạn mã đang tìm kiếm thuộc tính href của chính mục danh sách (tất nhiên là không tồn tại, vì các mục danh sách không có thuộc tính href).

Answer 3

Bạn cần nhắm mục tiêu < a> trong phạm vi < li>. Tôi thấy rằng bạn đang sử dụng jquery [và giả sử rằng bạn đã bao gồm tệp jquery cần thiết trong tiêu đề].

http://api.jquery.com/child-selector/ là một nơi tốt để tìm hiểu về bộ chọn jquery.

Giả sử rằng mọi thứ khác trong mã của bạn là chính xác, bạn có thể đạt được những gì tôi nghĩ rằng bạn đang tìm kiếm với

$(function() { 
    $(document).keyup(function(e) { 
     switch(e.keyCode) { 
      case 37 : window.location = $('li.previous a').attr('href'); 
       break; 
      case 39 : window.location = $('li.next a').attr('href'); 
       break; 
     } 
    }); 
}); 

Answer 4

Tôi tìm thấy câu hỏi này khi tìm kiếm giá trị nhân bản trên this question và quyết định chia sẻ chút jQuery Tôi đã viết thư trả lời rằng một sửa đổi cho bộ chọn của bạn:

// when the document is ready, run this function 
jQuery(function($) { 
    var keymap = {}; 

    // LEFT 
    keymap[ 37 ] = "li.prev a"; 
    // RIGHT 
    keymap[ 39 ] = "li.next a"; 

    $(document).on("keyup", function(event) { 
     var href, 
      selector = keymap[ event.which ]; 
     // if the key pressed was in our map, check for the href 
     if (selector) { 
      href = $(selector).attr("href"); 
      if (href) { 
       // navigate where the link points 
       window.location = href; 
      } 
     } 
    }); 
});