Question

我有几个跨度：

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

这些物品都在另一个旁边。我希望用户按下箭头键（左右）和＆amp;然后移动跨度（在我的情况下，这将更新当前对象并发送一个动作）。

编辑：我没有任何示例代码，因为我是一个绝对的初学者。但我也不希望任何人在这里发布一个有效的解决方案，我只想提出一些一般性的建议，我将如何在React / Redux中概念性地解决这个问题。

Answer 1

这是一个简单的JavaScript示例：

＆＃13;

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);
    }
});

＆＃13;

.selected { background-color: yellow }

＆＃13;

<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

＆＃13;

如何使用箭头键迭代<span> s

1 个答案: