javascript - 可导航表中的已筛选行

Question

更新:我终于找到了一个解决方案(使用 while 循环，在下面的代码中)，但有一个问题:当我导航搜索结果(因此未隐藏的元素)时，在过滤结果中导航一下后，导航停止工作，我得到“类型错误:行[selectedRow]未定义”

if(selectedRow >= rows.length){
                selectedRow = 0;
            } else if(selectedRow < 0){
                selectedRow = rows.length-1;
            }

此部分适用于完整列表，但不适用于过滤列表。我认为 while 循环导致了这种情况。请问我该如何解决这个问题？

导航:

var rows = document.getElementById("pokemons-list").children[1].children;
        var selectedRow = 0;
        
        document.body.onkeydown = function(e){
    
            //Clear out old row's color
            rows[selectedRow].style.backgroundColor = "#FFFFFF";

            //Calculate new row
            if(e.keyCode == 38){
                if(rows[selectedRow].style.display == "none"){
                while(rows[selectedRow].style.display == "none"){
                selectedRow--;
                }
                }else {
                    selectedRow--;
                }
            } else if(e.keyCode == 40){
                if(rows[selectedRow].style.display == "none"){
                while(rows[selectedRow].style.display == "none"){
                selectedRow++;
                }
                }else {
                    selectedRow++;
                }
            } else if(e.keyCode == 13){
                Pokemon_ID = selectedRow + 1;
                document.getElementById("id-input").value = Pokemon_ID;
                document.getElementById("id-input").click();
            }
            if(selectedRow >= rows.length){
                selectedRow = 0;
            } else if(selectedRow < 0){
                selectedRow = rows.length-1;
            }
            
            //Set new row's color
            rows[selectedRow].style.backgroundColor = "dodgerblue";

        
        };

Answer 1

您的过滤函数似乎隐藏了与您输入的字符串不匹配的行。隐藏是通过将 display 属性设置为“none”来实现的。

当您导航时，您不能忽略显示属性设置为“none”的表行吗？

更新:您可以在执行 rows[selectedRow].style.backgroundColor = "dodgerblue"之前检查 rows[selectedRow].style.display 的值。如果值为“none”，请重复您在函数内对selectedRow 所做的更改(无论是递增还是递减)。

更新 2:考虑下面的代码块:

while(rows[selectedRow].style.display == "none"){
    selectedRow++;
}

如果进入 while 循环时 selectedRow 的值为 0 并且 rows[0].style.display 的值为 >"none" 然后循环体将 selectedRow 的值更改为 -1。控件将立即返回到循环保护，并尝试检查行[-1].style.display。这是您想要避免的事情，所以为什么不在您更改的每一行之后尝试检查 selectedRow 呢？一个快速的解决方案涉及更改 while 循环的循环体:

while(rows[selectedRow].style.display == "none"){
    selectedRow++;
    if(selectedRow >= rows.length){
        selectedRow = 0;
    }
}

和

while(rows[selectedRow].style.display == "none"){
    selectedRow--;
    if(selectedRow < 0){
        selectedRow = rows.length-1;
    }
}