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

这应该有效：

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

Answer 2

最简单的方法是为要启用视频点击的所有项目添加公共类名称（所有#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根本不需要更改。< / p>

带switch语句的索引

2 个答案: