javascript - Eine Seite enthält mehrere Videos. Wie bindet man Ereignisse? Klicken Sie darauf, welches Spiel abgespielt werden soll. Nur das erste wird abgespielt.

Question

Wie der Titel schon sagt, sind die Strukturen und Namen der Videos alle gleich. Ich möchte Ereignisse auf einheitliche Weise mit ihnen verknüpfen ? Wie man es repariert?
js:

 //视频暂停播放
    $(".news_main .video_box .PLAY").click(function(){
        var myVideo = document.getElementsByTagName('video')[0];
        if(myVideo.paused){
            $(this).parents(".video_bg").hide();
            myVideo.play();
        }else{
            myVideo.pause();
            $(this).parents(".video_bg").show();
        }
    });

HTML:

 <p class="news_main">
        <!-- 视频块1-->
        <p class="news_block">
            <p class="video_box">
                <video class="video"  src="跑道全.mp4"></video>
                <p class="video_bg">
                    <img class="PLAY"  src="images/PLAY.png" alt=""/>
                </p>
            </p>
            <p class="video_msg">
                环氧地坪漆的优点？<span>50浏览</span>
            </p>
        </p>
        <!-- 视频块1-->
        <p class="news_block">
            <p class="video_box">
                <video class="video" src="跑道全.mp4"></video>
                <p  class="video_bg">
                    <img class="PLAY"  src="images/PLAY.png" alt=""/>
                </p>
        </p>
            <p class="video_msg">
                环氧地坪漆的优点？<span>50浏览</span>
            </p>
        </p>
        <!-- 视频块1-->
        <p class="news_block">
            <p class="video_box">
                <video class="video" src="跑道全.mp4"></video>
                <p class="video_bg">
                    <img class="PLAY" src="images/PLAY.png" alt=""/>
                </p>
            </p>
            <p class="video_msg">
                环氧地坪漆的优点？<span>50浏览</span>
            </p>
        </p>
    </p>

Answer 1

要找到当前点击块的video标签进行操作

 var myVideo=$(this).parents(".news_block").find(".video")[0];

Answer 2

问题在于这一句：

var myVideo = document.getElementsByTagName('video')[0];

获取video标签，根据标签名video返回了伪数组对象，后面的[]内是对象的索引值，你写了[0]所以每次只能播放第一个视频了(数组索引从0开始)。
要想点击哪个标签就播放哪个，可以使用for循环遍历该伪数组，配合下标确定相应的标签播放即可

Answer 3

通过事件委托事件获取当前点击元素，$(document).on('click','xx',fn(){});