时间戳

首页 > 解决方案 > 将条件附加到 eventTarget

javascript - 将条件附加到 eventTarget

问题描述

这是我在这里的第一个问题。这可能真的很简单，但我在使用 eventListeners 和 event.target 时遇到了一些问题。所以这是html和我的JS，我想做的是，当我点击一个IMG元素时，我想知道它是在'player1Div'还是'player2Div'中。我能够为整个“部分”创建一个 eventListener，并在我单击 e.target.tagName = 'IMG' 时让他触发，但是我不知道如何区分 player1Div 和 player2Div

这是HTML

<section class="cards">
    <div id="player1Div">
        <img src="images/card.jpg" name="2" />
        <img src="images/card.jpg" name="15" />
        <img src="images/card.jpg" name="4" />
        <img src="images/card.jpg" name="12" />
        <img src="images/card.jpg" name="6" />
        <img src="images/card.jpg" name="10" />
        <img src="images/card.jpg" name="8" />
        <img src="images/card.jpg" name="9" />
    </div>
    <div id="result">
        <span></span>
        <span>vs</span>
        <span></span>
    </div>
    <div id="player2Div">
        <img src="images/card.jpg" name="10" />
        <img src="images/card.jpg" name="14" />
        <img src="images/card.jpg" name="9" />
        <img src="images/card.jpg" name="7" />
        <img src="images/card.jpg" name="11" />
        <img src="images/card.jpg" name="5" />
        <img src="images/card.jpg" name="13" />
        <img src="images/card.jpg" name="3" />
    </div>

这是事件监听器的 JS：

    section.addEventListener('click', e => {
    if (e.target.tagName === 'IMG') {
        //add to an array of either player1 results or player2 results, depending on the 'click'
    }
});

标签： javascriptdomaddeventlistener

解决方案

您可以使用parentNode获取父级并从那里获取 ID。然后，您可以基于此添加到您想要的任何数组。

document.addEventListener('DOMContentLoaded', () => {

  const section = document.getElementsByTagName('section')[0]
  const player1 = []
  const player2 = []

  section.addEventListener('click', e => {
      if (e.target.tagName === 'IMG') {
          const parentDiv = e.target.parentNode.attributes.id.value
           
          // there are better ways to do this but let's keep it simple
          if (parentDiv === 'player1Div') {
            player1.push(e.target)
          } else {
            player2.push(e.target)
          }
      }
      
      const result = document.getElementById('result')
      const player1Result = result.getElementsByTagName('span')[0]
      const player2Result = result.getElementsByTagName('span')[2]
      
      player1Result.innerText = player1.length
      player2Result.innerText = player2.length
  })
  
 })
<section class="cards">
    <div id="player1Div">
        <img src="images/card.jpg" name="2" />
        <img src="images/card.jpg" name="15" />
        <img src="images/card.jpg" name="4" />
        <img src="images/card.jpg" name="12" />
        <img src="images/card.jpg" name="6" />
        <img src="images/card.jpg" name="10" />
        <img src="images/card.jpg" name="8" />
        <img src="images/card.jpg" name="9" />
    </div>
    <div id="result">
        <span></span>
        <span>vs</span>
        <span></span>
    </div>
    <div id="player2Div">
        <img src="images/card.jpg" name="10" />
        <img src="images/card.jpg" name="14" />
        <img src="images/card.jpg" name="9" />
        <img src="images/card.jpg" name="7" />
        <img src="images/card.jpg" name="11" />
        <img src="images/card.jpg" name="5" />
        <img src="images/card.jpg" name="13" />
        <img src="images/card.jpg" name="3" />
    </div>
</section>

推荐阅读