单击缩略图时将 iframe 的 url 切换到新的

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 视频 ID。所以我想我会走这条路

这是我的小提琴

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

对我来说，js 小提琴今天表现得有点奇怪。如果它继续加载并且没有显示任何内容，只需停止加载 pge，它就会在那里。很奇怪，但它发生在我身上

另一个主要错误是它必须在 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' 添加引号。您还可以在 for 循环中初始化 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