如何將 eventListener 函數添加到具有唯一 ID 的元素？

Question

我有一些動態卡片：

我想將 eventListener 添加到所有播放按鈕（他們的代碼是）：

<a href="link">
    <img src="play.svg">
    <audio src="myMusic.mp3"></audio>
</a>

當我點擊“播放”時，它應該如下所示：

（它應該改變圖像，也應該播放音頻）

到目前為止，我的 JS 代碼是：

<script>
var imgsPlay = document.getElementsByClassName('play-img-loop');
var audioPlayers = document.getElementsByClassName('audio-player');

window.onload = function() {
        for(var i = 0; i < imgsPlay.length; i++) {
            imgsPlay[i].addEventListener('click', function(event) {

                if(this.getAttribute('src') == "img/icons/play.svg") {
                    this.setAttribute('src', "img/icons/play_red.svg");
                    audioPlayers[i].play();

                } else if(this.getAttribute('src') == "img/icons/play_red.svg") {
                    this.setAttribute('src', "img/icons/play.svg");
                    audioPlayers[i].pause();
                }
                
            });
        }    
    }

</script>

（我可以手動完成，但是）不能動態完成。 我怎樣才能做到這一點 ？

Answer 1

你需要委托！ 如果沒有，那么您的問題只是循環內的JavaScript 閉包的騙局——簡單的實際示例

在這里，我假設您有一個名為 cardContainer 的容器

我有點困惑 _red 意味着播放或暫停，所以更改下面的代碼以匹配。 您的示例 HTML 與您顯示的代碼不匹配，播放器和圖像上沒有類，因此我假設您在實際代碼中確實有這些類

window.addEventListener('load', function() {
  document.getElementById('cardContainer').addEventListener('click', function(e) {
    const tgt = e.target;
    if (tgt.classList.contains('play-img-loop')) {
      const src = tgt.getAttribute('src');
      const running = src.includes('_red');
      const audioPlayer = tgt.closest('a').querySelector('audio');
      tgt.setAttribute('src', `img/icons/play$(running?'':'_red').svg`);
      if (running) audioPlayer.pause();
      else audioPlayer.play();
    }
  });
});

Answer 2

您的問題是對閉包的處理不正確。 事件偵聽器回調永遠不會按照您編寫的方式獲得正確的i值。 當事件被觸發時， i的值將始終是最后一個。

最簡單的解決方法是僅針對單個迭代的范圍定義變量i - 這就是let所做的。

    for(let i = 0; i < imgsPlay.length; i++) {
        imgsPlay[i].addEventListener('click', function(event) {

            if(this.getAttribute('src') == "img/icons/play.svg") {
             ...
    }    

有用的參考： for-loop 中的 setTimeout 不打印連續值