在 AngularJS 中使用带有 querySelector 的唯一 ID

Question

<video width="840" data-id="#{{$index}}">
    <source src="{{box.video}}" type="video/mp4">
</video>

我有这个视频范围：

<script>
    video = document.querySelector("[data-id]");
    function playVideo() {
      video.play();
    }
    function stopVideo() {
      video.pause();
    }
    function pauseVideo() {
      video.pause();
    }
    function skip(value) {
      video.currentTime += value;
    }      
 </script>

我点击了第一个视频，然后还可以，效果很好。但是当我点击另一个视频时，它会再次显示第一个视频。数据 ID 在脚本中应该是唯一的。我该怎么做？谢谢！

Answer 1

你只是选择第一个具有 [data-id] 属性的对象。每次都会自然是相同的元素。相反，您需要执行以下操作：

video = document.querySelector("[data-id='" + yourIndex + "']");