jQuery doubleTap双击重定向仅首个视频生效问题

• HTML标准明确规定同一页面中id属性值全局唯一，你给所有<video>标签都设了相同的id="doubleTap"，内部存ID的input也全是重复的id="id"。不管是jQuery的id选择器还是原生getElementById，遇到重复id只会匹配页面中第一个符合条件的元素，剩下的视频根本绑不上双击事件，就算事件能触发，取ID的时候也永远只会拿到第一个input的值。
• <video>标签有固定的内容模型，内部只允许放置<source>、<track>标签以及浏览器不支持video时的降级提示文本，你把input塞在video标签内部属于语法错误，浏览器渲染时会自动把input挪到video外面，结构完全不可控。

先改HTML结构，用类名标记需要绑定事件的视频，直接把视频ID存在video的自定义data属性上，删掉多余的input：

<video class="double-tap-video" autoplay muted data-id="1">
  <source src="/ver/videos/2024.mp4" type="video/mp4">
</video>

<video class="double-tap-video" autoplay muted data-id="2">
  <source src="/ver/videos/2023.mp4" type="video/mp4">
</video>

<video class="double-tap-video" autoplay muted data-id="3">
  <source src="/ver/videos/2022.mp4" type="video/mp4">
</video>

再改JS逻辑，用类选择器选中所有视频绑定事件，触发时直接读取当前被双击视频上存的ID即可：

// 如果你已经提前引入了doubleTap相关插件，用这段
$(".double-tap-video").doubleTap(function() {
  const targetId = $(this).data("id");
  location.href = 'h.php?id=' + targetId;
});

// 如果没装doubleTap插件，直接用原生双击事件即可，不需要额外依赖
$(".double-tap-video").on("dblclick", function() {
  const targetId = $(this).data("id");
  location.href = 'h.php?id=' + targetId;
});

• 批量绑定同类元素优先用class选择器，非必要不要用id做批量选择
• 元素关联的自定义参数优先用data-*属性存储，不要额外加隐藏input传值，既冗余也容易出定位错误
• 写HTML时要注意标签的嵌套规则，不要把不允许的子标签塞进父标签里，避免浏览器自动修正结构导致意料之外的问题

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