As the title says, there are several videos on my page. The structures and names of the videos are all the same. What I want to achieve is to bind events to them in a unified way. Which one should I click to start playing? How to fix it?
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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
To find the video tag of the currently clicked block to operate
The problem lies in this sentence:
Get the video tag and return a pseudo-array object based on the tag name video. The following [] is the index value of the object. You wrote [0] so only the first video can be played each time (the array index starts from 0) .
If you want to play which tag you click on, you can use a for loop to traverse the pseudo array, and use the subscript to determine the corresponding tag to play
Get the current clicked element through the event delegation event, $(document).on('click','xx',fn(){});