javascript - 当两个 div 匹配时触发视频播放

Question

我创建了一种滚动 div 的方法，一个有菜单，其他有带空白的 div，但一个有视频。

页面顶部是一个导航菜单，包含“下一个”、“上一个”、“重新加载”和“开始”。 这些命令在功能上发生了扭曲，

$("#next-item").on("click", function(){,

页面如下所示:

<div class="webcam-left">
  <div class="bottom-panel">
    <div class="center" id="content">
      <div class="bottom-panel-post internal start"></div>
      <div class="bottom-panel-post internal video-post"><video src="https://ia800606.us.archive.org/12/items/ACTV_News_open/ACTV_News_open.mp4"></video></div>
      <div class="bottom-panel-post internal"></div>
    </div>
  </div>
</div>
<div class="nav-right nav-main">
  <div class="rundown-panel">rundown</div>
    <div class="rundown-items">
       <div class="irl-today first"><div class="current">Welcome</div></div>
       <div class="irl-today override">Category name</div>
       <div class="irl-today">the end</div>
    </div>
  </div>
</div>

我想做的是，当向下滚动列表时，如何在显示视频时触发视频播放？

向下滚动时，我向包含视频的 div 添加了类。

左侧有.override，视频侧有.video-post。

我尝试执行 if hasClass() 但它在第一次点击时播放:

if ( $('.rundown-items').is('.override') ) {
if ($( '.bottom-panel-post' ).has('video')) {
  $('video').trigger('play');
};
}; 

工作代码 - https://jsfiddle.net/openbayou/paonbxcL/8/

Answer 1

我发现了，问题是它在所有项目中寻找一个类，而不是每个项目单独寻找一个类，所以我添加了一个 .each 函数来在每个单独的 div 上寻找一个类。

$(".slider-slide-wrap").each(function (i) {
  var posLeft = $(this).position().left
  var w = $(this).width();

  // add shown class on a div
  if (scrollLeft >= posLeft && scrollLeft < posLeft + w) {
    $(this).addClass('shown').siblings().removeClass('shown');
  }

  // if .shown has .play-video, trigger play
  if ($('.shown').is(".play-video")) {
    $('video').trigger('play');
  };
});