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");
});

Answer 2

您可以使用类（因此可以分配单个事件）和数据属性来存储有关要播放的视频的信息。

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

<ul id="playlist">
 <li class="active"> <a href="show1.mp4" id="item1" class="item" data-video="show1.mp4" data-name="episode 1"><img src="img.png" alt="" /></a></li>
 <li> <a href=“show2.mp4" id="item2"  class="item" data-video="show2.mp4" data-name="episode 2"><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"  class="video-button" data-video="show1.mp4" data-name="episode 1">Watch Now</button>
<button id="video-2”  class="video-button" data-video="show2.mp4" data-name="episode 2">Watch Now</button>

<强> JS

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

$( ".video-button, .item" ).click(function() {
    var video=$(this).attr('data-video'),
        name=  $(this).attr('data-name')
    flowplayer().play(video);
    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');
});

您还可以委派事件以避免为每个元素分配

$( "#yourContentWrapper" ).on('click','.video-button, .item'function() {
    var video=$(this).attr('data-video'),
        name=  $(this).attr('data-name')
    flowplayer().play(video);
    document.getElementById("show-title").innerHTML = "Now playing " + name;
});

如何修复冗余的jQuery

2 个答案: