Как включить больше переменных, чтобы показать и скрыть значок

У меня есть следующий скрипт, который отлично работает только для одного div ("dois"), но я хочу включить еще один div\variable для этого кода. Как этот код будет правильно работать для 2 div?

document.getElementById("_bar_Id_").onclick = function(c) {
  var x = document.getElementById("dois");
  if (x.style.visibility === "hidden") {
  x.style.visibility = "visible";
  } else {
    x.style.visibility = "hidden";
    }
  }
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
1
0
25
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно будет создать еще один слушатель .onclick следующим образом:


document.getElementById("_bar_Id_").onclick = function(c) {
  //for element with id: dois
  let x = document.getElementById("dois");
  if (x.style.visibility === "hidden") {
  x.style.visibility = "visible";
  } else {
    x.style.visibility = "hidden";
    }
  //for element with id: dois2
  x = document.getElementById("dois2");
  if (x.style.visibility === "hidden") {
  x.style.visibility = "visible";
  } else {
    x.style.visibility = "hidden";
    }
  }

Это, очевидно, не будет масштабироваться, когда у вас есть много элементов, которые нужно изменить по щелчку. Таким образом, у вас должен быть массив id всех элементов, которые вы хотите прослушать, и добавить прослушиватель событий для каждого из них следующим образом:

const elementIds = ["dois", "dois2", "dois3", "dois4",];

document.getElementById("_bar_Id_").onclick = function(c) {
  for (id of elementIds) {
    const x = document.getElementById(id);
    if (x.style.visibility === "hidden") {
    x.style.visibility = "visible";
    } else {
      x.style.visibility = "hidden";
    }
  }
}

и теперь всякий раз, когда у вас есть новый div с и id, который вы хотите прослушать, вам просто нужно добавить их в массив elementIds.

Еще больше улучшений будет то, как вы выбираете элементы, свойства которых вы меняете. С последним решением всякий раз, когда вам нужно добавить еще один элемент, вам придется придумать уникальный id и добавить его в массив elementIds.

В качестве альтернативы вы можете указать все элементы, необходимые для изменения visibility общего класса, такого как barClickTarget, и использовать getElementsByClassName, чтобы получить все элементы с этим классом. Тогда, теперь вы можете просто:

HTML

<div class="barClickTarget">...</div>
<div class="barClickTarget">...</div>
<div class="barClickTarget">...</div>

JS

document.getElementById("_bar_Id_").onclick = function(c) {
    const elems = document.getElementsByClassName("barClickTarget");
  for(const x of elems) {
    if (x.style.visibility === "hidden") {
    x.style.visibility = "visible";
    } else {
      x.style.visibility = "hidden";
    }
  }
}

и все, что вам нужно сделать сейчас, чтобы добавить еще один barClickTarget, это добавить его в класс целевого элемента.

На самом деле мне нужна еще одна подобная переменная, которая является еще одним div: var x = document.getElementById("dois"); а не другой bar_Id.

Bigboss 18.05.2022 02:46

Он работает аналогичным образом. Я отредактировал ответ соответственно.

cSharp 18.05.2022 02:59

Я попробовал способ, которым вы поделились, используя массив, но почему-то в моем браузере работает только один «div» при отображении и скрытии при нажатии кнопки.

Bigboss 18.05.2022 03:10

не могли бы вы обновить свой вопрос, чтобы показать нам это? @Большой босс

cSharp 18.05.2022 03:12

Я попытался использовать getElementsByClassName, как вы предложили, и это сработало хорошо. Спасибо!

Bigboss 18.05.2022 03:22

Другие вопросы по теме