我有一些HTML标签，使用单选按钮来控制它们。然而，我使用了一个带有一些JavaScript的选择下拉菜单来控制手机屏幕大小。

// Get select element for mobile navigation
const select = document.getElementById("location");

// Event listener for selecting tabs event for mobile
select.addEventListener("change", (e) => {
  const target = e.target.value;
  const venueTabs = document.querySelectorAll(".tabs__radio");
  for (let i = 0; i < venueTabs.length; i++) {
    if (venueTabs[i].id === target) {
      venueTabs[i].setAttribute("checked", "checked");
      console.log(venueTabs[i], target);
    } else if (venueTabs[i].id !== target) {
      venueTabs[i].removeAttribute("checked");
    }
  }
});

我的EventListener似乎可以正常工作，并且正在注销预期的内容。它将选项卡div id与event target进行比较。

然而，这似乎只在我测试每个选择选项两次时才起作用，在第三次尝试时，选项卡内容消失（CSS切换到display: none）。

我似乎找不出是什么导致了这个错误。

我已经用我的代码https：//codesandbox.io/s/nice-ramanujan-2yq1r？file=/src/index.js建立了一个代码沙箱来帮助调试它。如果下拉菜单没有显示，您可能需要查看它的移动/低于700px宽&；它将显示“选择”下拉菜单。

能帮忙找出导致这个错误的原因？我之前对EventListener进行了硬编码，它工作得很好，看起来就像这样。

select.addEventListener("change", (e) => {
  const target = e.target;
  const tabone = document.getElementById("tab0");
  const tabtwo = document.getElementById("tab1");
  const tabthree = document.getElementById("tab2");
  const tabfour = document.getElementById("tab3");

  if (target.value === "tab0") {
    tabtwo.removeAttribute("checked");
    tabthree.removeAttribute("checked");
    tabfour.removeAttribute("checked");
    tabone.setAttribute("checked", "checked");
  } else if (target.value === "tab1") {
    tabthree.removeAttribute("checked");
    tabfour.removeAttribute("checked");
    tabone.removeAttribute("checked");
    tabtwo.setAttribute("checked", "checked");
  } else if (target.value === "tab2") {
    tabfour.removeAttribute("checked");
    tabone.removeAttribute("checked");
    tabtwo.removeAttribute("checked");
    tabthree.setAttribute("checked", "checked");
  } else if (target.value === "tab3") {
    tabone.removeAttribute("checked");
    tabtwo.removeAttribute("checked");
    tabthree.removeAttribute("checked");
    tabfour.setAttribute("checked", "checked");
  }
});

但是，它不够动态，无法获取可能存在的任何数量的选项卡。

顺晟科技：

这不需要在所有单选按钮上进行任何循环-只需通过其ID选择您想要设置选中的一个元素：

select.addEventListener("change", (e) => {
  const target = e.target.value;
  const venueTab = document.querySelector("#"+target);
  venueTab.checked = true;
});