Как я могу нацелить дочерние элементы в этом Javascript коде? - PullRequest
Новая
       50

Как я могу нацелить дочерние элементы в этом Javascript коде?

0 голосов
/ 30 марта 2020

У меня есть сайт со списком, и я хочу сделать так, чтобы при нажатии на элемент всплывающее окно.

Я слежу за этим здесь - https://www.w3schools.com/howto/howto_js_popup.asp

Это мой HTML код - 

              <div class="popup" onclick="myFunction()">
                <ul class="matchup">
                  <li class="team team-top">2015 Clayton Kershaw</li>
                  <li class="team team-bottom">2017 Jose Altuve</li>
                </ul>
                <div class="popuptext" id="myPopup">
                  <h1>Popup Text</h1>
                </div>
              </div>

и мой JS - 

function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}

Всплывающее окно работает, но дело в том, что у меня есть 30 других списков на странице, и я не хочу создавать функцию для каждого из них.

Как мне написать код, чтобы он предназначался для дочерних элементов класса UL "matchup"?

1 Ответ

1 голос
/ 30 марта 2020

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

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

Существует множество инструментов, и самый простой из них - Vue. js

Однако я просто дам вам знать, как открыть всплывающее окно без Vue.js. Изучите себя на их веб-сайте, если вам это интересно.

сначала удалите свойство onclick из элемента .popup. 

<div class="popup">
  <ul class="matchup">
    <li class="team team-top">2015 Clayton Kershaw</li>
    <li class="team team-bottom">2017 Jose Altuve</li>
  </ul>
  <div class="popuptext" id="myPopup">
    <h1>Popup Text</h1>
  </div>
</div>

Затем замените код javascript на этот . 


// this `togglePopup` function works similarly with your `myFunction` function, but it caches the element selecting result for better performance.
const togglePopup = (() => {
  const element = document.querySelector('#myPopup');
  console.log(element)
  return () => {
    element.classList.toggle("show");
  }
})();

// this finds all `li` elements inside `.matchup` element and make to execute `togglePopup` when one of those are clicked by user.
document.querySelectorAll('.matchup li').forEach(e => {
  e.addEventListener('click', () => {
    togglePopup()
  })
})
...