बाइंड कीबोर्ड/दाएँ से बाएँ नेविगेशन

Question

मैं कर रहा हूँ एक फोटोग्राफर और एक वेबसाइट है, जहां मैं 'खाका' संरचना को संपादित करने में असमर्थ हूँ लेकिन अपलोड कर सकते हैं जावास्क्रिप्ट/सीएसएस आदि

मैं करने के लिए अगले/पिछला नेविगेशन बाध्य करने के लिए चाहते हैं कीबोर्ड दाएं/बाएं।

लिंक्स की संरचना इस प्रकार हैं:

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

मैं this में जाना जाता है और इस बनाने में कामयाब रहे।

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

यह वह जगह है जहां मैं अटक गया हूं। यह काम नहीं करता है क्योंकि यह मानता है कि मैं एक href टैग पर भरोसा कर रहा हूं लेकिन इसमें ली के प्रति प्रतिक्रिया दे रहा हूं।

किसी भी विचार की बहुत सराहना की जाएगी!

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') 'अगले' के वर्ग के साथ सभी सूची आइटम को लक्षित करता है, और है कि यह है - यह सूची आइटम की सामग्री होने की जानकारी है।

यदि आप किसी टैग का href चाहते हैं, तो आपको थोड़ा गहरा ($ ('li.next a') या $ (li.next ') जाना होगा। (' A ')) - आपका मूल कोड सूची आइटम की href विशेषता के लिए देख रहा था (जो निश्चित रूप से मौजूद नहीं है, क्योंकि सूची आइटम में href विशेषताएँ नहीं हैं)।

Answer 3

आपको < ए> < li> के भीतर लक्षित करने की आवश्यकता है। मैं देखता हूं कि आप jquery का उपयोग कर रहे हैं [और मान लें कि आपने हेडर में आवश्यक jquery फ़ाइल शामिल की है]।

http://api.jquery.com/child-selector/ jquery चयनकर्ताओं के बारे में जानने के लिए एक अच्छी जगह है।

यह मानते हुए कि अपने कोड में सब कुछ सही है आप प्राप्त कर सकते हैं कि मैं क्या लगता है कि आप के लिए देख रहे

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

साथ मैं इस सवाल पाया जब this question पर ड्यूप्स की तलाश में और jQuery का छोटा सा हिस्सा करने का निर्णय लिया

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