我正在尝试确定使用jQuery将视频加载到用户点击的最有效方法.
为了给出更多背景信息,我将在YouTube上有大约30个片段,每个片段在30-60秒之间,我想在用户浏览主题时动态将它们加载到页面右侧的div中.左侧有潜在的视频片段.
现在,我已经设置了这个HTML和jQuery.它有效,但我很好奇是否有更好的方法：
<div class="wrapper">
<div class="details_left">
<div class="cluster">
<a href="#" id="johnk" class="vid_trigger"><div class="title">The importance of demonstrating intellectual curiosity</div></a>
<div class="role">John K: Summer Consultant,BCG</div>
<div class="summary">Discussion on how curIoUsity is important to show in interviews because it leads to better answers on the job</div>
</div>
</div>
<div class="details_right" id="video_container">
video
</div>
</div>
和jQuery：
$('#johnk').click( function(){
$('#video_container').html('<iframe width="425" height="349" src="http://www.youtube.com/embed/bMvRdr-mUOU?rel=0" frameborder="0" allowfullscreen </iframe>');
})
为了减少每个视频的手动编码.click()我正在考虑创建一个具有ids->的关联数组.嵌入代码.有没有更好的方法来更有效地完成相同的功能？
提前感谢任何见解！
解决方法
您可以将URL添加到您的Href并在调用中获取它：
在您的HTML中：
<a href="bMvRdr-mUOU" id="johnk" class="vid_trigger">
现在在你的JQuery中：
$('.vid_trigger').click( function(e){
e.preventDefault();
var URL = $(this).attr('href');
var htm = '<iframe width="425" height="349" src="http://www.youtube.com/embed/' + URL + '?rel=0" frameborder="0" allowfullscreen ></iframe>';
$('#video_container').html(htm);
return false;
});
