如何定位元素父节点？修复多视频curtain样式失效问题

问题原因 #

原来的openCurtain函数里用document.querySelector(".curtain")只会抓取页面中第一个匹配.curtain类的元素，所以只有第一个视频的遮罩能触发样式变化，其他视频点击后毫无反应。

修复方案 #

核心是让每个点击的视频找到自己对应的curtain父元素，而不是全局找第一个。具体修改如下：

1. 修改openCurtain函数，通过点击事件的目标元素，向上定位到对应的curtain：

function openCurtain(event) {
  // 先找到当前被点击的带embed-youtube类的元素
  const targetEmbed = event.target.closest('.embed-youtube');
  // 再找到这个元素对应的curtain父容器
  const targetCurtain = targetEmbed.closest('.curtain');
  // 切换样式类实现过渡效果
  targetCurtain.classList.toggle('curtain-open');
}

如果你的DOM结构是固定的（embed-youtube的两层父节点就是curtain），也可以用更直接的写法：

function openCurtain(event) {
  const targetCurtain = event.target.parentElement.parentElement;
  targetCurtain.classList.toggle('curtain-open');
}

2. 确保所有视频元素都绑定了点击事件：

// 给页面中所有带embed-youtube类的元素绑定点击触发逻辑
document.querySelectorAll('.embed-youtube').forEach(item => {
  item.addEventListener('click', openCurtain);
});

这样每个视频被点击时，都会准确找到自己对应的curtain容器，触发蓝色过渡效果。

内容的提问来源于stack exchange，提问作者user17631451