如何选择多个具有相同名称的类并触发相同的功能？答案

【问题标题】：How to select multiple classes with the same name and fire the same function?如何选择多个具有相同名称的类并触发相同的功能？
【发布时间】：2021-06-22 06:54:24
【问题描述】：

如何让这个函数选择所有类“.stop”，当我们点击这个类的元素时停止视频？

window.addEventListener("load", function(event) {
    window.addEventListener('scroll', checkScroll, false);
    window.addEventListener('resize', checkScroll, false);

    let playvideo = document.querySelector('video');

    let close = document.querySelector('.stop');


    close.onclick = () => {
        playvideo.pause();
    }
});

【问题讨论】：

querySelectorAll('.stop').forEach(close => close.addEventListener(....)).
你有什么问题？您的代码看起来应该可以工作（尽管您不应该使用onclick，但您应该始终只使用addEventListener。
for( const el of document.QuerySelectorAll('.stop') ) el.addEventListener('click', e => e.currentTarget.pause() );.
如果我理解你的问题，那么这应该是你所追求的：JavaScript click event listener on class
问题是视频一直在后台播放，我想为多个元素“div”添加类，每当我点击类“stop”的元素时，我希望它停止视频。

标签： javascript function class

【解决方案1】：

委托

const container = document.getElementById('videoContainer'); // or whatever you have
container.addEventListener('click',e => {
  const tgt = e.target;
  if (tgt.classList.contains('stop')) {
    tgt.closest('div').querySelector('video').pause(); // assuming the stop is in the same div
  }
})

【讨论】：

【解决方案2】：

谢谢大家的帮助，我使用了这个脚本，它可以按我的意愿工作

    let playvideo = document.querySelector('video');

    document.querySelectorAll('.stop').forEach(item => {
        item.addEventListener('click', event => {
            //handle click
            playvideo.pause();
        })
    })

【讨论】：