Question

我有许多.nextBtn个元素，并且我已经为每个元素添加了点击侦听器。我尝试实现一种功能，如果点击img，则会调用takeToNextPage()。由于某种原因，它无法正常工作。

＆＃13;

let nextBtn = document.querySelectorAll('.nextBtn');
for (let i = 0; i < nextBtn.length; i++) {
  nextBtn[i].addEventListener('click', function(e) {
    if (e.target.parentElement.classList.contains('.nextBtn')) {
      takeToNextPage();
    }
  });
}

＆＃13;

<div class="page1 page">
  page 1
  <div class="nextBtnContainer">
    <div class="nextBtnText">some text</div>
    <div class="nextBtn" id="1">
      <img src="assets/game-15.png" alt="Next">
    </div>
  </div>
</div>

<div class="page2 page">
  page 2
  <div class="nextBtnContainer">
    <div class="nextBtnText">Play Mind Reader</div>
    <div class="nextBtn" id="2">
      <img src="assets/game-15.png" alt="Next">
    </div>
  </div>
</div>

＆＃13;

注意：请不要建议将事件监听器添加到img。我不想这样做。此外，.textBtn元素的实际数量超过了显示的数量。所以解决方案应该是可扩展的。

Answer 1

课不应该有。在开始

let nextBtn = document.querySelectorAll('.nextBtn');
for(let i = 0; i<nextBtn.length; i++){
  nextBtn[i].addEventListener('click', function(e){
    if(e.target.parentElement.classList.contains('nextBtn')){
      takeToNextPage();
    }
  });
}

从事件监听器的函数中调用另一个函数

1 个答案: