javascript - 如何修复我多余的 jQuery

Question

我不知道如何让我的 jQuery 不再那么冗余。基本上我想做的是允许用户单击他们想要观看的视频的缩略图(或按钮)，在播放器中播放该视频，向缩略图添加事件类并更改视频的标题取决于正在播放哪一首。我已经完成了大部分工作，但是，我的代码太拥挤，将来很难编辑。

<!— here is the thumbnail playlist that can start a video on click —>

<ul id="playlist">
 <li class="active"> <a href="show1.mp4" id="item1" onclick="changeTitle('episode 1')"><img src="img.png" alt="" /></a></li>
 <li> <a href=“show2.mp4" id="item2" onclick="changeTitle('episode 2')"><img src="img.png” alt="" /></a> </li>
 <li> <a href=“show3.mp4" id="item3” onclick="changeTitle('episode 3’)”><img src="img.png" alt="" /></a> </li>
 <li> <a href=“show4.mp4" id="item4” onclick="changeTitle('episode 4’)”><img src="img.png" alt="" /></a> </li>
 <li> <a href=“show5.mp4" id="item5” onclick="changeTitle('episode 5’)”><img src="img.png" alt="" /></a> </li>
</ul>


<! — show title that needs to changed depending on the video clicked —>

<h3 id="show-title">Now playing episode 1</h3>


<!— here are buttons that can also start the video on click —>

<button id="video-1" onclick="changeTitle('episode 1')”>Watch Now</button>
<button id="video-2” onclick="changeTitle('episode 2’)”>Watch Now</button>
<button id="video-3” onclick="changeTitle('episode 3’)”>Watch Now</button>
<button id="video-4” onclick="changeTitle('episode 4’)”>Watch Now</button>
<button id="video-5” onclick="changeTitle('episode 5’)”>Watch Now</button>


<!— using this to activate video on click —>

$( "#video-1, #item1" ).click(function() {
      flowplayer().play(“show1.mp4");
});

$( "#video-2, #item2" ).click(function() {
      flowplayer().play(“show2.mp4");
});

$( "#video-3, #item3" ).click(function() {
      flowplayer().play(“show3.mp4");
});

$( "#video-4, #item4" ).click(function() {
      flowplayer().play(“show4.mp4");
});

$( "#video-5, #item5" ).click(function() {
      flowplayer().play(“show5.mp4");
});


<!— using this to change the title according to which video was clicked —>

function changeTitle(name)
  {
     document.getElementById("show-title").innerHTML = "Now playing " + name;
  }



<!— using this to add and remove active class to thumbnails in playlist —>

$('#playlist li').on('click', function(){
      $(this).addClass('active').siblings().removeClass('active');
});

Answer 1

尝试这样做:

$('id^="video-", id^="item"').click(function () {
    var id = $(this).attr('id').slice(-1);
    flowplayer().play("show" + id + ".mp4");
});