javascript - 一个页面有多个视频，vidoe,怎么绑定事件呢？点击哪个哪个播放 我 的只播放第一个

问题描述

如题，我的页面中有好几个视频，视频的结构，名称都一样，想要实现的是 给他们统一绑定事件 单击那个 那个开始播放？请问怎么整？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 src='https://www.haobala.com/wenda/跑道全.mp4'></video><p class='video_bg'> <img src='https://www.haobala.com/wenda/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 src='https://www.haobala.com/wenda/跑道全.mp4'></video><p class='video_bg'> <img src='https://www.haobala.com/wenda/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 src='https://www.haobala.com/wenda/跑道全.mp4'></video><p class='video_bg'> <img src='https://www.haobala.com/wenda/images/PLAY.png' alt=''/></p> </p> <p class='video_msg'>环氧地坪漆的优点？<span>50浏览</span> </p></p> </p>

问题解答

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

var myVideo=$(this).parents('.news_block').find('.video')[0];回答2：

问题在于这一句：

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

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

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