Блог

У меня есть несколько 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");
    }
  }
});
 

Мой список событий, похоже, работает и выходит из системы, как и ожидалось. Он сравнивает вкладку div id с event target .

Однако это, похоже, работает только тогда, когда я дважды проверяю каждый параметр выбора, с 3-й попытки содержимое с вкладками исчезает (css переключается на display: none ).

Кажется, я не могу понять, в чем причина ошибки.

Я создал песочницу кода со своим кодом https://codesandbox.io/s/nice-ramanujan-2yq1r?file=/src/index.js чтобы помочь отладить его. Если выпадающее меню не отображается, вам, возможно, придется просмотреть его для мобильных устройств/ шириной менее 700 пикселей, и на нем отобразится раскрывающееся меню «Выбрать».

Может ли кто-нибудь помочь определить, что вызывает эту ошибку? Ранее я жестко закодировал список событий, который работал идеально, он выглядел так

 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");
  }
});
 

Однако он недостаточно динамичен, чтобы использовать любое количество вкладок, которые могут существовать.

Для этого не нужно зацикливаться на всех переключателях для начала — просто выберите один элемент, который вы хотите установить, проверив его идентификатор:

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