如何使用方向键遍历 <span>s

Question

我有几个跨度：

<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>

这些项目都挨着另一个。我希望用户按箭头键（向左和向右）然后在跨度中移动（在我的例子中，这将更新当前对象并调度一个动作）。

编辑：我没有任何示例代码，因为我是一个绝对的初学者。但我也不希望任何人在这里 post 一个可行的解决方案，我只想提供一些一般性建议，我将如何在 React/Redux.

中从概念上处理这个问题

Answer 1

这是一个简单的 JavaScript 示例：

function move(dir) {
    var selectables = Array.from(document.querySelectorAll('.selectable'));
    var selected = document.querySelector('.selected');
    var i = selectables.indexOf(selected);
    i = (i+selectables.length+dir)%selectables.length;
    selected.classList.remove('selected');
    selectables[i].classList.add('selected');
}

document.addEventListener('keydown', function (e) {
    switch(e.which) {
    case 37: return move(-1);
    case 39: return move(1);
    }
});

.selected { background-color: yellow }

<span class="selectable selected">Item 1</span>
<span class="selectable">Item 2</span>
<span class="selectable">Item 3</span>
<p>Set focus on this page and press left/right arrow keys

如何使用方向键遍历 <span>s

How to iterate through <span>s with Arrow keys

html

javascript

reactjs

redux

react-redux