- jQuery向li添加类,用默认值从其他

  显示原文与译文双语对照的内容

试图向在iframe中播放的缩略图视频添加边框。

$('document').ready(function(){
 $("#video-thumbs li").click(function(e){
 e.preventDefault();
 $("#video-thumbs li").addClass("current").not(this).removeClass("current");
 });
});

<iframe width="1020" height="574" id="myvideo" src="http://www.youtube.com/embed/Qdse1SEBimw" frameborder="0" allowfullscreen=""></iframe>


<ul id="video-thumbs">


 <li class="current" style="margin-left: 0;">


 <div id="playbtn" onclick="document.getElementById('myvideo').src='http://www.youtube.com/embed/Qdse1SEBimw'"></div>


 <img src="files/lamb.png" width="326" height="181">


 </li>


 <li>


 <div id="playbtn" onclick="document.getElementById('myvideo').src='http://www.youtube.com/embed/WZknytdWWhI'"></div>


 <img src="files/tuna.png" style="width: 326px">


 </li>


 <li style="margin: 0 0 0 11px">


 <div id="playbtn" onclick="document.getElementById('myvideo').src='http://www.youtube.com/embed/BAembvTjChs'"></div>


 <img src="files/myers.png" width="326" height="181">


 </li>


</ul>



时间: 原作者:

尝试不同地构造 HTML,并删除这些 unsigthly onclick 函数:


<iframe width="1020" height="574" id="myvideo" src="http://www.youtube.com/embed/Qdse1SEBimw" frameborder="0" allowfullscreen=""></iframe>


<ul id="video-thumbs">


 <li style="margin-left: 0;">


 <div class="playbtn" data-url='http://www.youtube.com/embed/Qdse1SEBimw'></div>


 <img src="files/lamb.png" width="326" height="181" class="current">


 </li>


 <li>


 <div class="playbtn" data-url='http://www.youtube.com/embed/WZknytdWWhI'></div>


 <img src="files/tuna.png" style="width: 326px">


 </li>


 <li style="margin: 0 0 0 11px">


 <div class="playbtn" data-url='http://www.youtube.com/embed/BAembvTjChs'></div>


 <img src="files/myers.png" width="326" height="181">


 </li>


</ul>​​​​​​​​​



现在做一些jQuery的事情:


$(function(){


 $("#video-thumbs li").on('click', function(){


 $(this).find('img').addClass("current").end()


. siblings().find('img').removeClass("current");


 $("#myvideo").prop('src', $(this).find('div').data('url'));


 });


});​



它应该能正常工作? 这里有一个英镑的FIDDLE

原作者:

switch 你的逻辑:


$('document').ready(function(){



 $("#video-thumbs li").click(function(e){


 e.preventDefault();


 $("#video-thumbs li").removeClass("current");//Remove all instances


 $(this).addClass("current");//Add `.current` to $(this) object only


 });



});



原作者:
...