Javascript Svelte：按下向上箭头键和向下箭头键时，如何将焦点设置为列表项中的上一个/下一个元素？

在svelte中按向上箭头/向下箭头键时，如何将焦点设置为列表项中的上一个/下一个元素

我想在按下向下箭头键时将焦点更改为下一个列表项，在键盘上按下向上箭头键时也将焦点更改为上一个列表项，我已经开始编写一些代码，但仍然无法正常工作，因此如果有人能帮我，那将非常好，提前谢谢

代码：-

<script>
    let keyCode;
    let item;
    
    function handleKeydown() {
        item =  document.getElementsByClassName('item');
        let itemLength = item.length;
        keyCode = event.keyCode;
        
        switch(keyCode){
            //ArrowUp
            case 38:
                //when clicking up arrow focus should move upwards li elements
            break;
            //ArrowDown
            case 40:
                //when clicking down arrow focus should move downwards li elements
            break;
        }   
    }
</script>

<style>
    .item:focus{
        border: 1px solid #000000;
    }
</style>

<svelte:window on:keydown={handleKeydown} />

<ul>
    <li class="item" tabindex="0" >
        <p>List Item 1</p>
    </li>
    <li class="item" tabindex="0" >
        <p>List Item 2</p>
    </li>
    <li class="item" tabindex="0" >
        <p>List Item 3</p>
    </li>
</ul>

让键盘编码；
让项目；
函数handleKeydown（）{
item=document.getElementsByClassName（'item'）；
设itemLength=item.length；
keyCode=event.keyCode；
开关（钥匙代码）{
//阿罗普
案例38：
//单击向上箭头时，焦点应向上移动
打破
//箭头向下
案例40：
//单击向下箭头时，焦点应向下移动
打破
}   
}
.项目：重点{
边框：1px实心#000000；
}


清单项目1



清单项目2



清单项目3

在这里，在代码中的注释中进行解释，在答案的末尾提供demo REPL链接

//取消引用事件对象，隔离“keyCode”属性，因为它是唯一需要的属性
函数handleKeydown（{keyCode}）{
//我们只对上下箭头键感兴趣
if（keyCode！==38&&keyCode！==40）返回
//当前关注的要素（如有）
const current=document.activeElement
//获取列表元素集合并将其转换为实际数组
const items=[…document.getElementsByClassName（'item'）]
//尝试将当前关注的元素与列表元素数组中的索引相匹配
const currentIndex=items.indexOf（当前）
//要新聚焦的列表元素的索引
让新索引
//如果当前聚焦的元素不是列表项，则默认聚焦列表中的第一项（索引0）
如果（当前索引==-1）{
newIndex=0
//否则，当前关注的元素就是我们列表中的一项
}否则{
//如果按了向上键，则将新索引设置为当前索引减去1，再加上列表大小，再乘以列表大小
如果（键代码===38）{
newIndex=（currentIndex+items.length-1）%items.length
//如果按下向下键，将新索引设置为当前索引加1，以列表大小为模
}否则{
newIndex=（currentIndex+1）%items.length
}
}
//模糊（=取消聚焦）当前聚焦的元素（无论是否为列表元素）
current.blur（）
//将列表元素聚焦在计算索引处
items[newIndex].focus（）
}

---

谢谢@thomashennes@BejoyN.J不客气。如果你觉得我的答案令人满意，请考虑接受它；也可能投票表决。谢谢