Question

更新我终于找到了一个解决方案（带有一个while循环，在下面的代码中），但是有一个问题：当我导航搜索结果（所以没有隐藏的元素）时，在过滤结果中导航一下后，导航停止工作，我得到了“TypeError：行[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 属性设置为＆＃34; none＆＃34;来实现的。

导航时，您是否可以忽略其显示属性设置为＆＃34;无＆＃34;？的表行

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

更新2：请考虑以下代码段：

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

如果输入while循环时selectedRow的值为0且rows[0].style.display的值为"none"，则循环体将更改{{1}的值到-1。控件将立即返回到循环保护程序，它将尝试检查值 selectedRow。这是您想要避免的事情，那么为什么不尝试在更改它的每一行之后检查rows[-1].style.display？快速解决方案将涉及更改while循环的循环体：

selectedRow

和

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

在可导航表中过滤行

1 个答案: