Javascript 如何检查添加的类是否有视频，然后播放

我有一个jQuery函数，它从元素中删除一个类，然后将一个类添加到列表中的下一个元素

<div class="slider-slide-wrap has-data multi first-item-is-video shown">
<ul class="multi-items">
  <li class="single-data-item active"></li>
  <li class="single-data-item item-is-video"><video id="video-post">video</video></li>
  <li class="single-data-item item-is-social"></li>
  <li class="single-data-item item-is-social"></li>
  <li class="single-data-item item-is-website"></li>
  <li class="single-data-item item-is-website"></li>
  <li class="single-data-item item-is-video"><video id="video-post">video</video></li>
</ul>
</div>

。单个数据项{显示：无}
视频{宽度：320px；高度：自动}
.单个数据项li{列表样式类型：无}

下一项



项目2
第3项
第4项
第5项

您只需使用$item.find（）选择视频即可

因此，只有选定的视频才会播放。您还可以在单击开始时使用

$（“视频”）.trigger（'pause'）

，在更改到下一项时停止每个视频

编辑：

$（'video#video post'）

选择id=“video post”的所有视频。所以他们都玩

.find（）

将仅选择$item的子项

您可以在此处阅读有关.find（）的更多信息：

$（“#多开始视频，#多下一项视频”）。单击（函数（）{
$（'video'）。触发器（'pause'）；
如果（$（'.first-item-is-video.show.multi-items li:first-child'）。是（':visible'））{
$（“#多启动视频”）.css（'display'，'none'）；
$（“#多下一项视频”）.css（'display'，'block'）；
}否则{
$（“#多启动视频”）.css（'display'，'none'）；
$（“#多下一项视频”）.css（'display'，'block'）；
}
让$item；
if（！$（'.first-item-is-video.show ul.multi-items li.single data item.active'）。长度）{
$item=$（'.first-item-is-video.show ul.multi-items li.single data item'）。first（）；
}
否则{
$prev=$（'.first-item-is-video.show ul.multi-items li.single data item.active'）；
$item=$prev.next（）；
如果（！$prev.next（）.length）{
$prev.removeClass（'active'）；
$prev.fadeOut（5）；
返回；
}
$prev.removeClass（'active'）；
$prev.fadeOut（5）；
}
如果（$（$item）.is（'.item is video'））{
$item.find（'video#video post'）。trigger（'play'）；
}
$item.addClass（'active'）；
$item.fadeIn（5）；
});
。单个数据项{显示：无}
视频{宽度：320px；高度：自动}
.单个数据项li{列表样式类型：无}

下一项



项目2
第3项
第4项
第5项


#id必须是唯一的
首先也是最重要的一点是，#id必须是唯一的，这一根本重要的规则没有例外。因此，将
#video-post
更改为
#video-post1
和
#video-post2
…更好的方法是在两者上都使用
.video-post
类


取消引用jQuery对象
标记由控制，它是一个普通的JavaScript接口。尽管jQuery本质上是JavaScript，但jQ无法识别普通的JS方法，如
.play（）
或
.pause（）
。虽然使用
.trigger（）
方法触发事件是可行的，但它不能很好地替代视频API提供的控件

为了在元素上使用普通JavaScript方法，必须将其作为DOM对象而不是jQuery对象引用。当然，使用简单的JS方法，例如：

const active = document.querySelector('.active'); 
let vid = active.querySelector('video'); 

如果您已经有以下情况，则为膨胀：

let $vid = $('.active').find('video');

幸运的是，有两种简单的方法可以将jQuery对象转换为DOM对象。该术语称为去参考。继续上面的例子：

括号符号

$vid[0]


.get（）
方法

$vid.get(0);


一个或另一个就足够了（它们是等价物）


演示
下面的演示只是jQuery的一个简化的高效使用。建议您遵循以下代码和样式：


少班
没有身份证
使用
此
关键字
条件流
使用索引位置
使用更合适的jQuery方法
活动代表团
互斥模式

清单上还有很多细节，对这些要点中的任何一点进行详细讨论都会避开这个问题。尝试演示，尽可能多地应用于您自己的代码。所有细节在演示中都有注释。祝你好运


/*
接下来的3条语句是一次性初始化步骤
-声明索引计数
-隐藏al
，活动的除外
-隐藏所有视频（这是为FX单独完成的）
*/
设指数=0；
$（'.items li'）.not（'.active'）.hide（）；
$（'video'）.hide（）；
/*
单击事件被委派给
用户单击的任何内容都被视为“此”（也称为目标）
*/
$（'.navbar'）。在（'click'，'button'，函数（e）上{
//声明最后一个
索引编号
const last=$（'.items li'）。长度-1；
//console.log（最后一个）；
/*
这些控制声明确定：
-如果索引编号增加或减少1
根据它被点击
-循环作为双向循环
通常情况下，我会使用三元的简洁和较少
膨胀，但为了可读性，我使用了if/else if/else
*/
if（$（this）.hasClass（'next'））{
索引++
如果（索引>上次）{