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

您忘记在$('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

Answer 2

我让你小提琴工作，看到一些错误。第一个是你的循环。它实际上什么都不做，因为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/

单击缩略图时，将iframe的URL切换为新的URL

2 个答案: