Bind klawiatura w lewo/prawo nawigacja

Question

Jestem fotografem i mieć stronę internetową, gdzie jestem w stanie zmieniać strukturę „szablon”, ale mogą przesyłać javascript/css etc.

chcę wiązać Next/Prev do nawigacji klawiatura prawy/lewy.

Struktura powiązań są:

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

I, o którym mowa this i udało się stworzyć to.

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

To tutaj utknąłem. Nie działa, ponieważ zakłada, że ​​odwołuję się do tagu href, ale odwołuję się do li, który go zawiera.

Wszelkie pomysły będą mile widziane!

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”) jest kierowana wszystkie elementy listy z klasą „obok”, i to wszystko - to nieświadomy zawartości elementu listy.

Jeśli chcesz href tagu, musisz przejść nieco głębiej ($ ("li.next a") lub $ (li.next '). Find (' a ')) - Twój oryginał kod szukał atrybutu href samego elementu listy (który oczywiście nie istnieje, ponieważ elementy listy nie mają atrybutów href).

Answer 3

Musisz kierować na < a> w ramach < li>. Widzę, że używasz jquery [i zakładasz, że zawarłeś niezbędny plik jquery w nagłówku].

http://api.jquery.com/child-selector/ to dobre miejsce, aby dowiedzieć się więcej o selektorach jquery.

Zakładając, że wszystko w kodzie jest prawidłowy można osiągnąć to, co myślę, że szukasz z

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

Znalazłem to pytanie, patrząc na powtórzeń na this question i postanowił podzielić się trochę jQuery pisałem odpowiedzieć na to jeden zmodyfikowany dla selektorów:

// 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; 
      } 
     } 
    }); 
});