当您单击缩略图时，将iframe的网址切换为新的网址

Question

我试图在单击缩略图时更新iframe的src =“”。这是我迄今为止所拥有的。

HTML

<div class="videoPopup"><span class="close">X close</span> 
    <iframe width="600" height="400" src="" frameborder="0" allowfullscreen></iframe> 
</div> 
<div class="vidTrigger"></div> 
<div class="vidTrigger"></div> 
<div class="vidTrigger"></div> 

jQuery的

var youtubevidId = ['SzsDHtzx6tI', 'BOQvtdXRtKw', 'gmIJoQV96PM']; 

for (var i = 0; i <= youtubevidId.length; i++) { 
    var iframeEmbed = ('http://www.youtube.com/embed/youtubevidId?enablejsapi=1&wmode=opaque'); 
} 
$('.vidTrigger').click(function() { 
    $('.videoPopup').show(); 
    $(iframe).attr(src, iframeEmbed); 
}); 

$('.close').click(function(){ 
    $('.videoPopup').hide(); 
}); 

我大概做了这样的事情 How do I dynamically change the content in an iframe using jquery?

但我试图使数组项看起来更好一点。该字符串有点长。唯一改变的就是youtube video id。所以我想我会走这条路

这里是我的小提琴

http://jsfiddle.net/sghoush1/mZh3c/3/

对我来说，JS小提琴今天有点怪作用。如果它继续加载并且什么都没有显示，只需停止加载它就会在那里。怪异，但它发生，我

另一个主要缺陷是它拥有jQuery的1.3.2 :-(工作。这完全吸

Answer 1

我给你捣鼓的工作，看到一些错误。第一个是你的循环。它实际上什么都没做，因为var是一个单独的字符串（每次迭代都不会改变），并且可以在click函数内定位，因为您正在循环内声明它。但你可以删除循环，你不需要它。

您可以选择基于缩略图的指数阵列的细胞点击与：

youtubevidId[$('.vidTrigger').index(this)] 

那么，改变，因为你在.attr()功能出现了拼写错误，这将不会改变任何东西。第一个参数必须是一个字符串：

$(selector).attr('src', 'the link'); 

此外，选择（使用.attr()时）应该是一个字符串藏汉：

$('iframe').attr('src', 'link'); 

如果你把我说的，消除环路并改变行：

$(iframe).attr(src, iframeEmbed); 

到：

$('iframe').attr('src', 'http://www.youtube.com/embed/'+ youtubevidId[$('.vidTrigger').index(this)] +'?enablejsapi=1&wmode=opaque'); 

一切都将正常工作：http://jsfiddle.net/mZh3c/6/

Answer 2

你忘了加引号$('iframe')和'src'，你还在为循环inicialize iframeEmbed ，所以其在click事件不可见

var youtubevidId = ['SzsDHtzx6tI', 'BOQvtdXRtKw', 'gmIJoQV96PM']; 
var iframeEmbed; 
for (var i = 0; i <= youtubevidId.length; i++) { 
    iframeEmbed = 'http://www.youtube.com/embed/youtubevidId?enablejsapi=1&wmode=opaque'; 
} 
$('.vidTrigger').click(function() { 
    $('.videoPopup').show(); 
    $('iframe').attr('src', iframeEmbed); 
}); 

$('.close').click(function(){ 
    $('.videoPopup').hide(); 
}); 

jsFiddle

编辑：我只是修正了一些在你的代码中存在错误，但是它仍然无法工作......因为代码逻辑错误，而不是检查index，所以有更简单的方法。使用.data存储视频id：

HTML：

<div class="vidTrigger" data-video="SzsDHtzx6tI"></div> 
<div class="vidTrigger" data-video="BOQvtdXRtKw"></div> 
<div class="vidTrigger" data-video="gmIJoQV96PM"></div> 

的jQuery：

$('.vidTrigger').click(function() { 
    $('.videoPopup').show(); 
    $('iframe').attr('src', 'http://www.youtube.com/embed/'+$(this).data('video')+'?enablejsapi=1&wmode=opaque'); 
}); 

$('.close').click(function(){ 
    $('.videoPopup').hide(); 
}); 

jsFiddle