Как использовать кнопку переключения, чтобы показать элементы в зависимости от того, какая кнопка была нажата? - PullRequest
Новая
       36

Как использовать кнопку переключения, чтобы показать элементы в зависимости от того, какая кнопка была нажата?

2 голосов
/ 06 ноября 2019

Я хочу переключать контент в зависимости от того, на какую кнопку я нажимаю. У меня есть список с событиями, все с кнопкой: «показать carpoolers». Каждый раз, когда я нажимаю кнопку, должен отображаться список carpoolers этого конкретного события.

  • X - все списки carpoolers (тег ul)
  • Y - всекнопки (h4 tag) 
var x = document.getElementsByClassName("lijstcarpoolers");
var y = document.getElementsByClassName("bekijkcarpoolers");
var i;
for (i = 0; i < y.length; i++) {
  y[i].addEventListener('click', setcssclass() {
    if (x[i].style.display === "none") {
      x[i].style.display = "block";
    } else {
      x[i].style.display = "none";
    }
  });
}

Как этого добиться?

Редактировать:

Это изображениевсе списки:

Снимок экрана

'Bekijkcarpoolers' или var y - кнопки 'Bekijk medecarpoolers'. 'Lijstcapoolers', или var x - это ограниченные списки.

На этом рисунке я показываю их все. Но когда я выставляю их на показ: нет, открывается только второй и четвертый при нажатии на «Bekijk medecarpoolers».

Редактировать 2 

<?php
$my_attendees = tribe_tickets_get_attendees( $product_id );
?>
<h4 class="bekijkcarpoolers" style="display: block; cursor: pointer;">Bekijk medecarpoolers</h4>
<ul class="attendee_list_my_account lijstcarpoolers">
<?php
foreach ($my_attendees as $attendee) {
$user_info = get_userdata($attendee['user_id']);
?>

Нажмите H4.

1 Ответ

0 голосов
/ 06 ноября 2019

Используйте делегирование события следующим образом: 

document.addEventListener("click", function(ev) {
  var target = ev.target;

  if(target.classList.contains("bekijkcarpoolers")) {
    var ulElement = target.nextElementSibling;
    ulElement.classList.toggle("hidden");
  }
});

Это добавляет прослушиватель события щелчка к документу. Когда в документе происходит щелчок, мы получаем цель этого щелчка и проверяем, является ли он элементом bekijkcarpoolers или нет, если да, мы получаем следующий элемент этого элемента, который является нашим элементом ul, и мы переключаемсяего hidden класс, который должен соответственно показать / скрыть его.

Затем добавьте стиль: 

.hidden { display: none; }

И используйте его, чтобы скрыть / показать элемент вместо встроенного стиля style="display: none/block".

...