如何嵌套多个keydown事件？

Question

我的总体目标是能够使用 TAB 键盘键在 3 个 div 之间导航，每个 div 的 CSS id 分别为 #sectionA、#sectionB 和 #sectionC。在每个 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 代码，但在添加第二个 $(document).keydown(function() 代码后无法正常工作。

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