如何修复冗余的jQuery
如何修复冗余的jQuery
提问于 2014-02-25 06:42:46
我想不出如何使我的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');
});回答 2
Stack Overflow用户
回答已采纳
发布于 2014-02-25 07:02:39
您可以使用类(因此您可以分配单个事件)和数据属性来存储有关播放哪个视频的信息。
<!— 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;
});Stack Overflow用户
发布于 2014-02-25 06:51:26
试着这样做：
$('id^="video-", id^="item"').click(function () {
var id = $(this).attr('id').slice(-1);
flowplayer().play("show" + id + ".mp4");
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22006580
复制相关文章
相似问题
腾讯云开发者
