JS переключатель для нескольких элементов div

Question

Что мне делать, если у меня есть несколько элементов в HTML foreach, и мне нужно сделать их все ползунком переключения, который открывает блок div с конкретной информацией об элементе, и мне также нужно добавить кнопку закрытия, если пользователь хочет закрытьдела.Извините, у меня нет кода для показа, потому что я не нашел ничего, что соответствовало бы моим потребностям.Основная идея состоит в том, чтобы иметь страницу продукта с продуктами, которые отображаются на странице с использованием foreach ... Затем при нажатии на продукт открывается блок переключателя div с информацией о продукте.Что я должен искать и что использовать, я ничего не могу найти, потому что я ограничен своими знаниями.Извините за ужасный английский.

Answer 1

Из того, что я понял.Вам нужно переключать элементы div с помощью тега кнопки, и нажатие кнопки u покажет этот конкретный элемент div.

    <div id="container1" class={container1 ? "show" : "hide"}> 
       container1
     </div>
     <div id="container2"class={container2 ? "show" : "hide"}> 
     container2
     </div>
     <div id="container3"class={container3 ? "show" : "hide"}> 
     container3         
     </div>

и три кнопки теги для вызова функции переключения, чтобы показать три элемента div.

<div class="container">
  <button name="container1" onclick=(toggle())>Container1</button>
  <button name="container2" onclick=(toggle())>Container2</button>
  <button name="container3" onclick=(toggle())>Container3</button>
</div>

функция переключения

function toggle(e) {
 if(e.target.name === 'container1'){
  container1 = true;
  }
  else if(e.target.name === 'container2'){
  container2 = true; 
  }
 else if(e.target.name === 'container3'){
  container3 = true;   
  }
 }

css part

  .show{
     display: block;
   }
  .hide{
    display: none;
   }

Answer 2

Вы можете легко контролировать видимость элемента либо внутри элемента, на который вы нажимаете, либо после него, используя класс, который вы переключаете.Вот пример управления div после одного из div, который управляет переключением:

document.getElementById("container").addEventListener("click", function(e) {
  var toggleDiv = e.target.closest(".toggle");
  if (toggleDiv && this.contains(toggleDiv)) {
    toggleDiv.classList.toggle("closed");
  }
});

.closed + .detail {
  display: none;
}

<div id="container">
  <div class="toggle closed">Product A</div>
  <div class="detail">Details about Product A</div>
  <div class="toggle closed">Product B</div>
  <div class="detail">Details about Product B</div>
  <div class="toggle closed">Product C</div>
  <div class="detail">Details about Product C</div>
</div>

Ключевые биты:

• Скрытие деталей с помощью CSS с помощью соседнего комбинатора (+))
• Переключение класса на переключение div

Я использовал делегирование событий, чтобы подключить обработчик, но вы могли бы вместо этого подключить его к каждому отдельному div, если хотите.Обратите внимание, что метод Element#closest, который я использовал, является относительно новым, вам может понадобиться полифилл или цикл на parentNode.