单Exit按钮实现关闭任意播放中Player的功能修复请求

API 探路者

2026-8-13

修复单个Exit按钮关闭任意播放状态Player的问题

需求与当前问题

页面包含3个Player组件，点击任意Play按钮后，对应Player进入播放状态（添加active类）
页面中的单个Exit按钮需要关闭任意处于播放状态的Player
现存问题：removePlayerHandler函数仅能关闭第一个.wrap下的Player，无法实现预期功能

问题根源

原函数中使用document.querySelector('.wrap')只会获取页面中第一个匹配的.wrap元素，因此只能操作第一个Player，无法定位到其他处于播放状态的Player。

修复方案

修改removePlayerHandler函数，直接定位到带有active类的Player容器，移除该类即可关闭播放状态：

const removePlayerHandler = () => {
  // 直接筛选出处于播放状态的Player容器
  const activePlayer = document.querySelector('.wrap.active');
  if (activePlayer) {
    activePlayer.classList.remove('active');
  }
};

完整修复后的JavaScript代码

const playBtns = document.querySelectorAll('.play');
const exitBtn = document.querySelector('.exit');

const playHandler = (e) => {
  const wrap = e.target.closest('.wrap');
  wrap.classList.add('active');
};

const removePlayerHandler = () => {
  const activePlayer = document.querySelector('.wrap.active');
  if (activePlayer) {
    activePlayer.classList.remove('active');
  }
};

playBtns.forEach(btn => btn.addEventListener('click', playHandler));
exitBtn.addEventListener('click', removePlayerHandler);