तीर कुंजी का उपयोग कर सूची के माध्यम से नेविगेट करें? (जावास्क्रिप्ट/जेक्यू)

Question

मुझे यह पूरा करने का कोई जवाब नहीं मिल रहा है कि यह कैसे पूरा किया जाए, फिर भी यह एक ऐसी सुविधा है जिसे मैंने कई बार देखा है। अनिवार्य रूप से मैं एक सूची को प्रतिबिंबित कर रहा हूं और मैं तीर कुंजियों/प्रविष्टि का उपयोग करके इन वस्तुओं को हाइलाइट और चुनने की क्षमता बनाना चाहता हूं। क्या कोई मुझे यह विचार देने में मदद कर सकता है कि मैं इसे कैसे पूरा कर सकता हूं? मुझे पता है कि कीकोड्स (बेशक) का उपयोग कैसे करें, बस सूची में आइटम चुनने के लिए इसे फ़ंक्शनिंग कोड में कैसे चालू करें ...

मैं सोच रहा था कि मुझे कुछ प्रकार का छुपा रेडियो बटन होना चाहिए इसे चयनित के रूप में चिह्नित करें या नहीं ... लेकिन तब भी मुझे नहीं पता कि मैं एक रेडियो बटन से दूसरी तरफ सूची में कैसे और नीचे कूदूंगा। तो अगर कोई मुझे इसके साथ हाथ दे सकता है तो मैं वास्तव में इसकी सराहना करता हूं। धन्यवाद।

Answer 1

चूंकि आपने वास्तव में यह समझाया नहीं है कि आपको क्या परेशानी हो रही है, मैंने अभी एक सामान्य समाधान बनाया है। उम्मीद है कि इस मदद करता है:

var li = $('li'); 
var liSelected; 
$(window).keydown(function(e) { 
    if(e.which === 40) { 
     if(liSelected) { 
      liSelected.removeClass('selected'); 
      next = liSelected.next(); 
      if(next.length > 0) { 
       liSelected = next.addClass('selected'); 
      } else { 
       liSelected = li.eq(0).addClass('selected'); 
      } 
     } else { 
      liSelected = li.eq(0).addClass('selected'); 
     } 
    } else if(e.which === 38) { 
     if(liSelected) { 
      liSelected.removeClass('selected'); 
      next = liSelected.prev(); 
      if(next.length > 0) { 
       liSelected = next.addClass('selected'); 
      } else { 
       liSelected = li.last().addClass('selected'); 
      } 
     } else { 
      liSelected = li.last().addClass('selected'); 
     } 
    } 
}); 

JSFiddle: http://jsfiddle.net/Vtn5Y/

Answer 2

यह ब्राउज़र पर निर्भर हो सकता। ऐसा लगता है कि रेडियो इनपुट एक दूसरे के बगल में हैं (लेबल भी ठीक है)।

<input type="radio" ... /> 
<input type="radio" ... /> 
<input type="radio" ... /> 

लेकिन यह फ़ायरफ़ॉक्स में रेडियो नेविगेशन टूट जाएगा और शायद अन्य ब्राउज़रों:

<div><input type="radio" ... /> ... </div> 
<div><input type="radio" ... /> ... </div> 

यह जैसे ही आप कुछ एक सा एक सरल सूची (श्रेणियों तुलना में अधिक जटिल बनाना चाहते कष्टप्रद है .. ।)।

Answer 3

देशी जावास्क्रिप्ट

के लिए मेरे उदाहरण

var ul = document.getElementById('list'); 
 
var liSelected; 
 
var index = -1; 
 

 
document.addEventListener('keydown', function(event) { 
 
var len = ul.getElementsByTagName('li').length-1; 
 
    if(event.which === 40) { 
 
index++; 
 
    //down 
 
    if (liSelected) { 
 
\t \t \t removeClass(liSelected, 'selected'); 
 
     next = ul.getElementsByTagName('li')[index]; 
 
     if(typeof next !== undefined && index <= len) { 
 
     
 
       liSelected = next; 
 
      } else { 
 
       \t index = 0; 
 
       liSelected = ul.getElementsByTagName('li')[0]; 
 
      } 
 
      addClass(liSelected, 'selected'); 
 
      console.log(index); 
 
    } 
 
    else { 
 
    index = 0; 
 
    
 
    \t liSelected = ul.getElementsByTagName('li')[0]; 
 
\t \t \t addClass(liSelected, 'selected'); 
 
    } 
 
    } 
 
    else if (event.which === 38) { 
 
    
 
    //up 
 
    if (liSelected) { 
 
\t \t \t removeClass(liSelected, 'selected'); 
 
     index--; 
 
     console.log(index); 
 
     next = ul.getElementsByTagName('li')[index]; 
 
     if(typeof next !== undefined && index >= 0) { 
 
       liSelected = next; 
 
      } else { 
 
      \t \t index = len; 
 
       liSelected = ul.getElementsByTagName('li')[len]; 
 
      } 
 
      addClass(liSelected, 'selected'); 
 
    } 
 
    else { 
 
    index = 0; 
 
    \t liSelected = ul.getElementsByTagName('li')[len]; 
 
\t \t \t addClass(liSelected, 'selected'); 
 
    } 
 
    } 
 
}, false); 
 

 
function removeClass(el, className) { 
 
    if(el.classList) { 
 
     el.classList.remove(className); 
 
    } else { 
 
     el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); 
 
    } 
 
}; 
 

 
function addClass(el, className) { 
 
    if(el.classList) { 
 
     el.classList.add(className); 
 
    } else { 
 
     el.className += ' ' + className; 
 
    } 
 
};

li.selected {background:yellow}

<ul id="list"> 
 
    <li>Item 1</li> 
 
    <li>Item 2</li> 
 
    <li>Item 3</li> 
 
    <li>Item 4</li> 
 
</ul>

https://jsfiddle.net/m6watqpe/