3

当我单击缩略图时，我正在尝试更新 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();
});

我可能已经做了这样的事情 如何使用 jquery 动态更改 iframe 中的内容？

但我试图让数组项看起来更好一些。字符串有点长。唯一改变的是 youtube 视频 ID。所以我想我会走这条路

这是我的小提琴

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

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

另一个主要错误是它必须在 jquery 1.3.2 上工作 :-(。这完全糟透了

4

2 回答 2

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

于 2013-06-30T23:10:39.267 回答
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/

于 2013-06-30T23:11:28.597 回答