带开关语句的索引
带开关语句的索引
提问于 2014-02-28 21:03:03
我试图找出如何使用索引将这些代码组合成一个switch语句。我使用这段代码允许某人点击缩略图，在播放器中播放该视频，并根据播放的视频更改标题。提前谢谢。
<script>
// Play the video
$( "#video-1, #item1" ).click(function() {
flowplayer().play("video1.mp4");
});
$( "#video-2, #item2" ).click(function() {
flowplayer().play("video2.mp4");
});
$( "#video-3, #item3" ).click(function() {
flowplayer().play("video3.mp4");
});
$( "#video-4, #item4" ).click(function() {
flowplayer().play("video4.mp4");
});
$( "#video-5, #item5" ).click(function() {
flowplayer().play("video5.mp4");
});
// Change title
function changeTitle(name)
{
document.getElementById("show-title").innerHTML = "Now playing " + name;
}
// Add and remove active class
$('#playlist li').on('click', function(){
$(this).addClass('active').siblings().removeClass('active');
});
</script>回答 2
Stack Overflow用户
回答已采纳
发布于 2014-02-28 21:48:49
最干净的方法是将一个公共类名添加到您希望启用视频单击的所有项(所有#itemX和#video-X元素)，这样您就可以使用非常简单的javascript作为公共单击处理程序。然后从单击元素的ID值中提取数字，以确定要播放哪个视频：
$(".videoPlay").click(function {
var num = this.id.match(/\d+/)[0];
flowplayer().play("video" + num + ".mp4");
});如果不能添加公共类，则只需列出所需的所有选择器：
$("#video-1, #video-2, #video-3, #video-4, #video-5, #item1, #item2, #item3, #item4, #item5").click(function() {
var num = this.id.match(/\d+/)[0];
flowplayer().play("video" + num + ".mp4");
}); 或者，如果您没有其他id可能会陷入部分ID匹配，则可以使用带有选择器逻辑的开始，不过我更愿意避免这种情况，因为浏览器解析速度不快(它必须查看每个具有ID的单个对象)。我倾向于列出实际的‘d或使用公共类名：
$("[id^='video-'], [id^='item']").click(function() {
var num = this.id.match(/\d+/)[0];
flowplayer().play("video" + num + ".mp4");
}); 如果单击项目的id与视频文件名之间没有对应关系，那么您需要在两者之间创建某种映射。我最喜欢的技术是在实际元素上指定一个data-video自定义属性：
<div class="videoPlay" data-video="thor.mp4">Click me to Play a Video</div>然后，JS将是：
$(".videoPlay").click(function {
var fname = $(this).data("video");
flowplayer().play(fname);
});您可以随心所欲地使用这些HTML元素，只需确保每个元素都指定要播放的视频文件，而且JS在添加越来越多时根本不需要更改。
Stack Overflow用户
发布于 2014-02-28 21:09:27
这应该是可行的：
$( "[id^='video-'], [id^=item]" ).click(function() {
var vid = this.id.replace(/(\d)|./g, '$1');
flowplayer().play("video"+ vid +".mp4");
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22105725
复制相关文章
相似问题
腾讯云开发者
