按钮触发周围按钮的功能失效。
创始人
2024-11-03 18:02:21
0

要实现按钮触发周围按钮的功能失效,可以通过以下步骤进行解决:

  1. 首先,在HTML中为每个按钮添加一个共同的类名(例如"btn")和一个唯一的id。



  1. 使用JavaScript获取所有具有共同类名的按钮,并为每个按钮添加一个点击事件处理程序。
// 获取所有按钮
const buttons = document.getElementsByClassName("btn");

// 为每个按钮添加点击事件处理程序
for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
    // 点击事件处理程序
    disableSurroundingButtons(i);
  });
}
  1. 编写一个函数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代码放置在