所以，我正在創建一個記憶游戲，我希望能夠使用鍵盤選擇和翻轉不同的卡片。現在我在卡片上使用標簽索引（它們是 DIV 元素），但問題是當使用 TAB 遍歷卡片時，我沒有按正確的順序選擇卡片，而是在選擇時跳來跳去。我嘗試將選項卡索引值設定為不同的值，例如具有最低值的第一張卡和具有最高值的最后一張卡。
所以，我的問題是：如何以正確的順序使用 Tab 鍵遍歷卡片？
請注意，我只使用 vanilla javascript。
uj5u.com熱心網友回復：
下一次，嘗試提供一個最小的可重現示例。
這是一個：根據元素的tabindex屬性值對元素進行排序：
document.querySelector(`[tabindex="1"]`).focus();
const sortedDivsOnTabIndex = [...document.querySelectorAll(`[tabindex]`)]
.sort((divA, divB) =>
divA.getAttribute(`tabindex`) - divB.getAttribute(`tabindex`));
// result
document.querySelector(`pre`).textContent = sortedDivsOnTabIndex
.map(div =>
`tabindex ${div.getAttribute(`tabindex`)}, content "${div.textContent}"`)
.join(`\n`);#tiContainer {
display: inline-block;
width: 12rem;
}
pre {
display: inline-block;
position: absolute;
top: 0;
left: 13rem;
padding-left: 1rem;
border-left: 1px solid #999;
}<div id=tiContainer>
<div tabindex=3>t3</div>
<div tabindex=4>t4</div>
<div tabindex=8>t8</div>
<div tabindex=6>t6</div>
<div tabindex=1>t1</div>
<div tabindex=9>t9</div>
<div tabindex=2>t2</div>
<div tabindex=10>t10</div>
<div tabindex=7>t7</div>
<div tabindex=5>t5</div>
</div>
<pre></pre>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/338319.html
標籤：javascript html css
下一篇：React鉤子不更新組件