0

私の全体的な目標は、TAB キーボード キーを使用して #sectionA、#sectionB、および #sectionC の CSS ID を持つ 3 つの div 間を移動できるようにすることです。そして、各 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 コードを取得できましたが、2 番目の $(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;                  
                    }
                }
        });
    });
4

1 に答える 1

0

うまくいけば、これがあなたを正しい方向に導くでしょう。決して完璧ではありません。

あなたが抱えていた基本的な問題は、キーダウン イベントをネストしようとすることでした。あなたはそれをすることはできません。代わりに、右矢印と左矢印に個別のキーダウン イベントを用意する必要があります。これらの各イベントは、ユーザーがどの 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>
于 2012-04-18T01:04:07.893 に答える