Javascript 带switch语句的索引

我试图找出如何使用索引将此代码组合到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>

//播放视频
$（“#视频-1，#项目1”）。单击（函数（）{
flowplayer（）.play（“video1.mp4”）；
});
$（“#视频-2，#项目2”）。单击（函数（）{
flowplayer（）.play（“video2.mp4”）；
});
$（“#视频-3，#项目3”）。单击（函数（）{
flowplayer（）.play（“video3.mp4”）；
});
$（“#视频-4，#项目4”）。单击（函数（）{
flowplayer（）.play（“video4.mp4”）；
});
$（“#视频-5，#项目5”）。单击（函数（）{
flowplayer（）.play（“video5.mp4”）；
});
//改名
函数changeTitle（名称）
{
document.getElementById（“显示标题”）.innerHTML=“正在播放”+名称；
}
//添加和删除活动类
$（#playlist li'）。在（'click'，function（）上{
$（this.addClass（'active'）.sides（）.removeClass（'active'）；
});

这应该可以：

$( "[id^='video-'], [id^=item]" ).click(function() {
    var vid = this.id.replace(/(\d)|./g, '$1');
   flowplayer().play("video"+ vid +".mp4");
});

---

最干净的方法是为要启用视频点击的所有项目（所有

#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的对象）。我建议列出实际ID或使用通用类名：

$("[id^='video-'], [id^='item']").click(function() {
    var num = this.id.match(/\d+/)[0];
    flowplayer().play("video" + num  + ".mp4");
}); 

---

如果单击项目的id与视频文件名之间没有对应关系，则需要在两者之间创建某种映射。我最喜欢的技术是在实际元素上指定

数据视频

自定义属性：

<div class="videoPlay" data-video="thor.mp4">Click me to Play a Video</div>

---

您可以拥有任意数量的HTML元素，只需确保每个元素都指定了您希望该元素播放的视频文件，并且在添加越来越多的内容时，JS根本不需要更改。

您可以发布一个HTML示例吗？我认为switch语句不适用，可能是一个数据属性？我觉得通过使用类和自定义数据属性，所有这些都可以在几行代码中完成。。。请设置fiddle:，如果可能的话，提供测试视频的正确链接。它似乎对我不起作用。我摆弄了一把小提琴，或者我实际上想做什么。如果你能看看，那就太好了。谢谢如果每个视频标题不是以“视频”开头，那么是一个数字？例如，如果是thor.mp4、gravity.mp4等？@user3349779-如果ID值和视频名称之间没有对应关系，则必须创建某种对应关系。您可以在每个HTML元素上使用

data video=“thor.mp4”

属性来指定要播放的视频，也可以创建一个javascript查找表，将id值与文件名匹配，并使用JS查找正确的文件名，或者还有许多其他选项。如果id和视频文件名不匹配，我可能会在HTML元素上使用

数据视频

自定义属性，因为这是无限可扩展的，并且使HTML可以自我描述。@user3349779-我添加了一个使用自定义数据属性指定视频文件名的示例，直到我的答案结束。数据视频解决方案非常完美！你就是那个人！感谢you@user3349779-既然你是新来的，我想知道你是否明白StackOverflow的工作原理？当你的问题得到回答时，你应该通过勾选答案左边的复选标记来选择对你最有帮助的答案。这将奖励提供该答案的人声誉点数，并且您还将因遵循适当的程序而获得一些声誉点数（这可能导致在网站上获得其他特权），这将创建一个更具长期价值的网站，作为标记为正确答案的问题和良好答案的存储库。

$(".videoPlay").click(function {
    var fname = $(this).data("video");
    flowplayer().play(fname);
});