gpt4 book ai didi

javascript - 使用箭头键将单击事件设置为容器中的下一个选项卡

转载 作者:行者123 更新时间:2023-11-30 20:16:50 34 4
gpt4 key购买 nike

我有一个带有三个选项卡的过滤器容器。当前选定的选项卡具有 ag-tab-selected 类。当容器加载时,第一个选项卡始终处于选中状态并且具有 ag-tab-selected 类。我需要能够使用左右箭头键在选项卡之间导航。

当用户点击右箭头键时,ag-tab-selected 类应该应用到下一个选项卡,如果点击左箭头键,ag-tab -selected 类应该应用于上一个选项卡。当前选项卡还应应用 .click(),以便当用户按下箭头键时, View 会根据选择的选项卡进行更改。我目前能够循环浏览可用的选项卡并将触发器应用于当前选项卡,但无法使用箭头键迭代到上一个或下一个:

if(e.key === 'ArrowRight') {
for(let i = 0; i < tabTriggers.length; i++){
//on arrow, trigger currently focused ag-tab with click
if(tabTriggers[0].classList.contains('ag-tab-selected') === true){
tabTriggers[i].click();
}
}
}

当前 fiddle 的链接:Link

最佳答案

我根据你提供的代码完成了任务,我还用一些逻辑扩展了它,这样你就有了一个工作示例。在这里可用 http://jsfiddle.net/631zjmcq/

所以我为每个选项卡定义了一个点击处理程序,以便您获得一些交互性(我想看看实际的解决方案)您提供的代码的基础运行良好,只是有一个问题,即一旦找到一个元素,您就不会停止循环,它会一直运行直到到达列表中的最后一个元素。这意味着它会点击每个元素,直到它到达最后一个元素,所以我在那个 for 循环中放入了一个 break 语句。

为了向后,我修改了 for 循环,所以这次它会从列表的末尾向后循环。

const selectedTabClass = 'ag-tab-selected';

document.querySelectorAll('.ag-tab').forEach(tab => {
tab.addEventListener('click', e => {
if (tab.classList.contains('ag-tab-selected')) return

document.querySelector(`.${selectedTabClass}`)
.classList.remove(selectedTabClass)
tab.classList.add(selectedTabClass)
})
})

document.addEventListener('keydown', e => {
let tabTriggers = document.querySelectorAll('.ag-tab');

if (e.key === 'ArrowRight') {
for (let i = 0; i < tabTriggers.length; i++) {
if (tabTriggers[i].classList.contains('ag-tab-selected') === true) {
tabTriggers[i+1].click();
break;
}
}
}

if (e.key === 'ArrowLeft') {
for (let i = tabTriggers.length-1; i > 0; i--) {
if (tabTriggers[i].classList.contains('ag-tab-selected') === true) {
tabTriggers[i-1].click();
break;
}
}
}
});

关于javascript - 使用箭头键将单击事件设置为容器中的下一个选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51847407/

34 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com