要实现按钮触发周围按钮的功能失效,可以通过以下步骤进行解决:
// 获取所有按钮
const buttons = document.getElementsByClassName("btn");
// 为每个按钮添加点击事件处理程序
for (let i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function() {
// 点击事件处理程序
disableSurroundingButtons(i);
});
}
disableSurroundingButtons
,该函数将在按钮被点击时调用,并禁用周围按钮的功能。function disableSurroundingButtons(index) {
// 禁用当前按钮
buttons[index].disabled = true;
// 获取前一个按钮的索引
const prevIndex = index - 1 >= 0 ? index - 1 : buttons.length - 1;
// 获取后一个按钮的索引
const nextIndex = index + 1 < buttons.length ? index + 1 : 0;
// 禁用前一个按钮和后一个按钮
buttons[prevIndex].disabled = true;
buttons[nextIndex].disabled = true;
}
在上述代码中,我们首先禁用了被点击的按钮,然后获取了前一个按钮和后一个按钮的索引,并将它们禁用。
这样,当点击任何一个按钮时,它将禁用自身以及周围的两个按钮。
注意:为了使代码生效,需要确保JavaScript代码在HTML加载完成后执行。可以将JavaScript代码放置在标签内,或者在页面加载完成后使用
window.onload
事件来执行代码。
上一篇:按钮触发用户特定消息
下一篇:按钮处理