Question

我正在尝试列出要选择的项目，但是使用向上或向下箭头时的行为不太好。当我使用向上或向下箭头时，它会滚动<div>并选择并专注于<li>标签，但是滚动会先移动，因此似乎很少见。

如何使用向上和向下键实现正确的行为？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <style>
        ul {
        width: 400px;
        height: 200px;
        background: aqua;
        overflow: scroll;           
        }
    </style>

    <script>

        $(function(){
            num = ""

            $("body").keyup(function(e){

                if (e.keyCode == 40){

                    $("ul").find('li:eq('+num+')').focus().css('color', 'red');
                    console.log(num ++)

                }

                if (e.keyCode == 38){

                    $("ul").find('li:eq('+num+')').focus().css('color', 'blue');
                    console.log(num --)

                }   


            })

        })

    </script>
</head>
<body>

<ul>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>



</ul>


</body>
</html>

非常感谢您的帮助。

Answer 1

我不太清楚您的问题，但我会尽力帮助您。为此，我为您准备了解决方案。让我知道你不是故意的！

$(function() {
    var num = 0;

    $("body").keyup(function(e) {

        if (e.keyCode == 40) {
          var elementIndex = $("li:focus").index();
          $("ul > li").eq(elementIndex).css('color', 'red');
          console.log("Last focused element index: " + elementIndex + " has change to: " + Math.floor(elementIndex + 1));
          $("ul > li").eq(elementIndex + 1).focus();
        }

        if (e.keyCode == 38) {
          var elementIndex = $("li:focus").index();
          $("ul > li").eq(elementIndex).css('color', 'blue');
          if(elementIndex == 0) return;
          console.log("Last focused element index: " + elementIndex + " has change to: " + Math.floor(elementIndex - 1));
          $("ul > li").eq(elementIndex - 1).focus();
        }


    })

})

ul {
        width: 400px;
        height: 200px;
        background: aqua;
        overflow: scroll;           
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

</head>
<body>

<ul>
    <li tabindex="0">Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>
    <li tabindex="0" >Palabra Palabra Palabra Palabra</li>



</ul>


</body>
</html>

使用Keyup JavaScript，JQuery在列表中选择项目

1 个答案: