带有 switch 语句的索引

Question

我正在尝试弄清楚如何使用索引将此代码组合到 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>

Answer 1

最简洁的方法是为您希望启用视频点击的所有项目（所有 #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和视频文件名之间没有对应关系，那么你需要在两者之间创建某种映射。我最喜欢的技术是在实际元素上指定 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 根本不需要更改。

Answer 2

这应该可行：

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