当你点击缩略图时，将iframe的url切换为新的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();
});

我可能可以做出这样的事情如何使用jquery动态更改iframe中的内容？。

但我试图让数组项看起来更好一些。字符串有点长。其中唯一变化的是YouTube视频ID。因此，我想我会走这条路。

这是我的fiddle链接。

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

对我来说，JSFiddle今天有点奇怪。如果它一直在加载而没有显示出任何东西，只需停止页面加载，它就会出现。很奇怪，但这是我遇到的情况。

另一个主要问题是它必须在jQuery 1.3.2上运行 :-(。这真是太糟糕了。

- soum

---

一个很棒的工具（设置更快，有时比jsFiddle更好）http://jsbin.com - Roko C. Buljan

你有什么问题？ - raam86

我喜欢你对youtubevidId的迭代和每次重新分配iframeEmbed的方式... - Luke

首先，iframeEmbed变量对于click函数来说并不可见。 - fmodos

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

- Shaddow

Answer 2

我已经让你的小提琴工作了，发现了一些错误。第一个错误是你的循环。实际上它什么也没做，因为变量是一个单独的字符串（每次迭代都没有变化），并且可以在点击函数中定位，因为你在循环内声明它。但是你可以删除循环，你不需要它。

你可以根据缩略图点击的索引选择数组的单元格：

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/

- Karl-André Gagnon

---

@Karl，你做的也很棒。我会记住这个的。谢谢你做这个。 - soum

实际上你所做的确实非常好。我想我会坚持使用这个。再次感谢。 - soum