javascript - jQuery .each() 函数始终显示 iframe 中的最后一个链接

Question

我的页面上有一些链接，每个人都链接到一个弹出窗口，该弹出窗口应该加载具有动态源属性的 iframe。 iframe 有一个名为“pholder”的 div，应在其中加载 iframe。因此，每个链接上都应该有另一个 iframe。但事实并非如此。总是一样的。确切地说，它总是最后一个链接，我不知道为什么。您可以在此处看到弹出窗口的 HTML:

<div id="toPopup3">
    <div id="videoContainer">
        <div id="activeVideo">
            <div class="pholder"></div>
        </div>
    </div>
</div> <!--toPopup3 end-->

我不得不说我的链接都有类toPopup3 link + e。 e 是视频的最大值 (0-23)。所以我使用此代码添加 iframe:

var videoLink;
var split;

$('[class^="topopup3 link"]').each(function(){
    videoLink = $(this).attr('href');
    split = videoLink.split("/");
});

$('.pholder').html('<iframe src="http://player.vimeo.com/video/'+split[3]+'?title=0&byline=0&portrait=0&color=fc6626" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');

所以它总是显示 iframe 中的最后一个源，我不会删除它。有人可以帮助我吗？

以下是该页面实时版本的链接:Live Page 。问题出现在“电影制作”中。我还将 console.log(split[3]); 放入代码中以查看链接的顺序。

Answer 1

编辑:如果对您的目标有更多的了解，我认为最好使用点击处理程序来完成此任务:

$('[class^="topopup3 link"]').on('click', function(){
    var videoLink = $(this).attr('href');
    split = videoLink.split("/");
    $('.pholder').html('<iframe src="http://player.vimeo.com/video/'+split[3]+'?title=0&byline=0&portrait=0&color=fc6626" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
    // may need to show the iframe modal or whatever here
});

在完成循环之前，您不会对split变量执行任何操作，因此该值将是最后一个。如果您想使用每个值，则需要将后续的 $('.pholder')... 代码移至 each block