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代码，但是一旦我添加第二个$（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>

如何嵌套多个keydown事件？

1 个答案: