如何使用箭头键浏览<li>元素 - jQuery？

时间：2018-05-09 15:30:29

标签： javascript jquery

**我正在尝试使用键盘箭头键在具有以下结构的列表项之间导航 - 帮助赞赏**

我宁愿不在这里粘贴自己的代码，因为它有很多与问题无关的属性......我可以在每个选定的项目上添加一个类吗？

<div class="card-columns">
    <div class="card">
      <div class="card-body">
        <ul class="card-list">
           <a href="#">
             <li>Card Item1</li>            
           </a>
           <a href="#">
             <li>Card Item2</li>            
           </a>
           <a href="#">
             <li>Card Item3</li>            
           </a>
        </ul>
     </div>
   </div>
    <div class="card">
      <div class="card-body">
        <ul class="card-list">
           <a href="#">
             <li>Card Item3</li>            
           </a>
           <a href="#">
             <li>Card Item4</li>            
           </a>
           <a href="#">
             <li>Card Item5</li>            
           </a>
        </ul>
     </div>
   </div>
</div>

4 个答案:

答案 0 :(得分：1)

你的问题很模糊，没看到你做了什么我只能建议你应该考虑使用Javascript和onkeypress（）事件处理程序。

您可以通过向他们提供所有课程来获取<a>代码的列表，然后将其称为＆＃34; cardATags＆＃34;。

var aList = document.querySelectorAll(".cardATags");

我们将以0的索引开始页面。

var index = 0;

并将它们设置为当前具有类似

的项目 
aList[index].focus();

现在，在onkeypress()事件处理程序中，您可以增加索引并设置下一个焦点项。

祝你好运。

稍微澄清一下，在代码中添加类，如下所示：

<div class="card-columns">
    <div class="card">
      <div class="card-body">
        <ul class="card-list">
           <a class="cardATags" href="#">
             <li>Card Item1</li>            
           </a>
           <a class="cardATags" href="#">
             <li>Card Item2</li>            
           </a>
           <a class="cardATags" href="#">
             <li>Card Item3</li>            
           </a>
        </ul>
     </div>
   </div>
    <div class="card">
      <div class="card-body">
        <ul class="card-list">
           <a class="cardATags" href="#">
             <li>Card Item3</li>            
           </a>
           <a class="cardATags" href="#">
             <li>Card Item4</li>            
           </a>
           <a class="cardATags" href="#">
             <li>Card Item5</li>            
           </a>
        </ul>
     </div>
   </div>
</div>

答案 1 :(得分：1)

将所有li元素放入集合中并设置跟踪变量。 然后为文档设置keydown事件处理程序，根据按下的键修改跟踪器变量，并将样式应用于其collect中与跟踪变量匹配的索引的元素。

有关详细信息，请参阅下面的评论：

＆＃13;
＆＃13; 
// Get all the <li> elements into a collection
var listItems = document.querySelectorAll(".card-list li");

// Set up a counter to keep track of which <li> is selected
var currentLI = 0;

// Initialize first li as the selected (focused) one:
listItems[currentLI].classList.add("highlight");

// Set up a key event handler for the document
document.addEventListener("keydown", function(event){
  // Check for up/down key presses
  switch(event.keyCode){
    case 38: // Up arrow    
      // Remove the highlighting from the previous element
      listItems[currentLI].classList.remove("highlight");
      
      currentLI = currentLI > 0 ? --currentLI : 0;     // Decrease the counter      
      listItems[currentLI].classList.add("highlight"); // Highlight the new element
      break;
    case 40: // Down arrow
      // Remove the highlighting from the previous element
      listItems[currentLI].classList.remove("highlight");
      
      currentLI = currentLI < listItems.length-1 ? ++currentLI : listItems.length-1; // Increase counter 
      listItems[currentLI].classList.add("highlight");       // Highlight the new element
      break;    
  }
});
＆＃13; 
.highlight { background-color:#ff0; }
＆＃13; 
<div class="card-columns">
    <div class="card">
      <div class="card-body">
        <ul class="card-list">
           <a href="#">
             <li>Card Item1</li>            
           </a>
           <a href="#">
             <li>Card Item2</li>            
           </a>
           <a href="#">
             <li>Card Item3</li>            
           </a>
        </ul>
     </div>
   </div>
    <div class="card">
      <div class="card-body">
        <ul class="card-list">
           <a href="#">
             <li>Card Item3</li>            
           </a>
           <a href="#">
             <li>Card Item4</li>            
           </a>
           <a href="#">
             <li>Card Item5</li>            
           </a>
        </ul>
     </div>
   </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

＆＃13;
＆＃13; 
$('li').eq(0).addClass('active')
$('.cardATags').eq(0).focus();


$(document).keydown(function(e) {
   var li_count=$('li').length;
   var curent_active=0;

   var each_counter=0;
   $('li').each(function(){
   	    if( $(this).hasClass('active')){
   	    	   curent_active=each_counter;
   	    }
   	    each_counter++;
   });

  if(e.keyCode == 37) { // left
    curent_active-=1;
  }else if(e.keyCode == 39) { // right
     curent_active+=1;
  }if(e.keyCode == 38) {  // top
    curent_active-=1;
  }if(e.keyCode == 40) {  // bott
    curent_active+=1;
  }

  if(curent_active==li_count){
  	  curent_active=0;
  }

  $('li').removeClass('active');
  $('li').eq(curent_active).addClass('active');

});
＆＃13; 
   .active{
   	  background-color:gray;
   }
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


Press UP or DOWN or LEFT or RIGHT arrows...


<div class="card-columns">
    <div class="card">
      <div class="card-body">
        <ul class="card-list">
           <a href="#">
             <li>Card Item1</li>
           </a>
           <a href="#">
             <li>Card Item2</li>
           </a>
           <a href="#">
             <li>Card Item3</li>
           </a>
        </ul>
     </div>
   </div>
    <div class="card">
      <div class="card-body">
        <ul class="card-list">
           <a href="#">
             <li>Card Item3</li>
           </a>
           <a href="#">
             <li>Card Item4</li>
           </a>
           <a href="#">
             <li>Card Item5</li>
           </a>
        </ul>
     </div>
   </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

这可能不是您要找的，但其他人可能会发现我的解决方案有帮助。鉴于以下列表：

<ul class="dropdown-menu" id="my_ul" >
  <li tabindex="0"> <a href="#"> Project 1 </a> </li>
  <li tabindex="0"> <a href="#"> Project 2 </a> </li>
  <li tabindex="0"> <a href="#"> Project 3 </a> </li>
</ul>

我需要做两件事才能让它工作：

  1. 将 tabindex="0" 添加到每个 <li> - 这允许列表元素可聚焦（从而允许您使用箭头键进行导航）
  2. 我在向下箭头事件上使用 jQuery 将焦点移到包装器 <a> 的第一个 <li> 的第一个 <ul> 标记，例如jQuery("#my_ul > li > a").first().focus();（其中 my_ul 是包装器的 ID <ul>）。就我而言，与您的情况不同，我将 <a> 标签放在 <li> 中 - 不确定这是否有所不同，但认为值得一提。
相关问题
最新问题