如何嵌套多個keydown事件？

Question

我的總體目標是能夠使用TAB鍵盤鍵在3個div之間進行導航，每個div都具有#sectionA，#sectionB和#sectionC的CSS ID。並且在每個div中，我有一個無序列表，我希望使用右箭頭鍵和左箭頭鍵來瀏覽列表。

我的HTML標記是這樣的：

   <div id="sectionA"> 
      <ul id="ul_sectionA"> 
        <li> Section A - Test B</li> 
        <li> Section A - Test B</li> 
      </ul> 
    </div> 
    <div id="sectionB"> 
      <ul id="ul_sectionB"> 
        <li> Section B - Test B</li> 
        <li> Section B - Test B</li> 
      </ul> 
    </div> 
      <div id="sectionC"> 
      <ul id="ul_sectionC"> 
        <li> Section C - Test B</li> 
        <li> Section C - Test B</li> 
      </ul> 
    </div> 

到目前爲止，我能夠得到以下的jQuery代碼，但不工作，一旦我添加第二個（文檔）$ .keydown（（）的函數代碼

$(document).ready(function() 
    { 
     var divs = ["sectionA","sectionB","sectionC"]; 
     var startIndex = 0; 

     $(document).keydown(function(e) 
     { 
      alert("test"); 
       if (e.which == 9) 
      { 
       $("div").css("border", ""); 
        $("#"+divs[startIndex]).css("border","1px solid blue"); 
       var divID = $("#" +divs[startIndex]).attr("id"); 
       $(document).keydown(function(event) 
       { 
        if(event.which == 37) 
        { 
         if("#"+divID+"ul li").addClass() == "highlight") 
         { 
          $(this).next().addClass("highlight"); 
         } else 
         { 
          $(this).addClass(); 
         } 
        } 
       }); 
       startIndex++; 

        if(startIndex === divs.length) 
        { 
          startIndex = 0;     
        } 
       } 
     }); 
    });  

Answer 1

希望這將讓你在正確的方向前進，這是不完美的任何手段。

你曾試圖巢keydown事件。你不能做到這一點的基本問題。研究所您需要爲右箭頭和左箭頭分別設置一個keydown事件，這些事件中的每一個都需要確定用戶「選擇了」哪個div，然後滾動該div中的那些列表項。下面的代碼將開始該過程，但它只處理左箭頭，甚至還沒有完成。

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     var divs = ["sectionA","sectionB","sectionC"]; 
     var startIndex = 0; 
     var startListItemIndex = 0; 
     var divID; 
     $(document).keydown(function(e) 
     { 
      if (e.which == 9) 
      { 

       $("div").css("border", ""); 

       $("#" + divID + " ul li").css("border", "0px"); //remove all borders 
       $("#"+divs[startIndex]).css("border","1px solid blue"); //now add border to selected div 
       divID = $("#" +divs[startIndex]).attr("id"); 

       startListItemIndex = 0; //reset startIndex each time tab is pressed. 
       startIndex++; 

       if(startIndex === divs.length) 
       { 
         startIndex = 0;     
       } 

      } 
       //left arrow click 
       if(event.which == 37) 
       { 
       startListItemIndex++; 

       //remove all highlights first 
       $("#" + divID + " ul li").removeClass("highlight"); 

       //now add highlight to the next li element. 
       $("#" + divID + " ul li:nth-child(" + startListItemIndex + ")").addClass("highlight"); 
       } 
     }); 


    }); 
    </script>