javascript - 添加/删除类而不是单击时删除类
问题描述
我为视频滑块库设置了单击功能,当我单击主视频播放/或暂停时,我试图将“活动--缩略图”类添加到相应的缩略图中。它正在工作并添加课程。当我再次单击主视频时,它并没有删除课程。不知道我哪里出错了,有什么建议吗?
jQuery:
$('.video-main').on('click', function () {
var mainVideoIndex = $('.video-main').index(this),
activeThumbnail = $(this).closest('.video-playlist').find('.l-thumbnail__title').eq(mainVideoIndex),
$('.l-thumbnail__title').not(activeThumbnail).removeClass('active--thumbnail');
activeThumbnail.addClass('active--thumbnail');
});
解决方案
您需要检查单击的项目是否具有活动类,然后继续添加或删除活动类
我从另一个答案中借用了 html 和 css
$('.video-main').on('click', function() {
var $this = $(this);
var mainVideoIndex = $('.video-main').index(this),
activeThumbnail = $this.closest('.video-playlist').find('.l-thumbnail__title').eq(mainVideoIndex);
// check if the clicked is the same as currently active item
// if it is then remove active
if (activeThumbnail.hasClass('active--thumbnail')) {
activeThumbnail.removeClass('active--thumbnail');
}
// remove active from all thumbs titles then add active to clicked item
else {
$('.l-thumbnail__title').removeClass('active--thumbnail');
activeThumbnail.addClass('active--thumbnail');
}
});
ul.video-playlist li p {
border-radius: 5px;
padding: 5px;
}
.active--thumbnail {
box-shadow: 0px 0px 5px green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="video-playlist">
<li>
<p class="l-thumbnail__title">Thumbnail 1</p>
<button class="video-main">Video 1</button>
</li>
<li>
<p class="l-thumbnail__title">Thumbnail 2</p>
<button class="video-main">Video 2</button>
</li>
<li>
<p class="l-thumbnail__title">Thumbnail 3</p>
<button class="video-main">Video 3</button>
</li>
<li>
<p class="l-thumbnail__title">Thumbnail 4</p>
<button class="video-main">Video 4</button>
</li>
</ul>
推荐阅读
- mysql - 错误:连接两个表时不是唯一的表/别名
- python-3.x - AttributeError:'NoneType' 对象在来自维基百科的 scrapimg 时没有属性 'findAll'
- graphql - 如何将本地 @client 模式扩展添加到 apollo-codegen
- python - 在子类python中调用父方法
- kubernetes - MySQL 环境变量不会在 Openshift V3 上填充
- java - 如何获取 Firebase TIMESTAMP 和当前时间之间的小时数?
- shell - 如何grep一个yaml值
- algorithm - 找到给定输入的模式
- html - Div:使用剪辑路径后的 Css 无法正常工作
- ansible - 从 Ansible playbook 中的 find 命令打印值