如何嵌套多个键控事件？

Question

我的总体目标是能够使用TAB键在3个div之间导航，每个div都有#sectionA、#sectionB和#sectionC的CSS id。在每个div中，我有一个无序列表，我想使用左右箭头键来浏览列表。

我的超文本标记语言如下：

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