没有设置 ID 的 flexslider 的多个实例 - 不能使用 flexslider api答案

【问题标题】：Multiple instances of flexslider without setting IDs - can't use flexslider api没有设置 ID 的 flexslider 的多个实例 - 不能使用 flexslider api
【发布时间】：2013-08-14 01:20:33
【问题描述】：

让我补充一下，我的代码基于 http://juanfra.me/2012/08/flexslider-multiple-videos-v2/，但是，我只使用 .slider 而不是类 .flexslider。

我目前拥有的是 2 个 div，（一个右对齐和一个左对齐），然后通过 JS 我附加并预先添加它们以在不同的 div 之间创建“轮播”效果。每个 div 都有一个 flexslider 实例。

这很好用，但是因为我克隆了 div，所以我不能为它们使用 ID，因为这意味着我克隆了一个 div，然后插入它，瞧，我们有两个元素（至少）具有相同的 ID。

所以基本上，一切都很好，除了调用 .flexslider('play') 或暂停。我也试过jQuery('.slider').data('flexslider').flexslider('play')，但无济于事。我还尝试遍历每个 .slider 并在其上调用 .flexslider('play/pause')。 console.log 中也没有消息，这真的很奇怪。拜托，你能指出我正确的方向吗？

我使用 froogaloop-api 来正确控制我在 flexslider 中嵌入的 vimeo-videos，这很有效。

这是我的 HTML 结构的一部分（必须删除某些部分，例如附加类、文本和正确的 vimeo 视频 URL，还要注意 iframe id 是随机的（它们与我在vimeo player-url 变量，但这无关紧要，因为问题在于 flexslider）：

<div class="slider customContent">
    <ul class="slides">
        <li>
            <div class="image">
                <iframe id="player_1" src="http://player.vimeo.com/video/123123?api=1&amp;player_id=player_1" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
            </div>

            <div class="post">
                <div class="content">
                    <span class="meta-title">Another title</span>
                </div>
            </div>
        </li>
        <li>    
            <div class="image">
                <iframe id="player_2" src="http://player.vimeo.com/video/123123?api=1&amp;player_id=player_2" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
            </div>

            <div class="post">
                <div class="content">
                    <span class="title">A title</span>
                </div>
            </div>
        </li>
    </ul>
</div>

这是一个 jsfiddle：http://jsfiddle.net/DMPpa。

发生了什么：当我播放具有另一个 div 的 ID 的视频时（因为只能有一个 ID），flexslider 拒绝暂停该 id 和视频的特定 flexslider 实例。例如，如果我单击最后一个 flexslide 项目，我想暂停幻灯片并播放视频，而不是暂停幻灯片，并在一小段时间后 flexslider “幻灯片”到另一个视频项目而不暂停当前播放一个。

如果我在每个 iframe 上设置一个唯一的 ID，这可行，但我不能在我的 HTML 中这样做，因为 div 被附加和前置以创建轮播效果。

所以我认为我们需要做的是在该 iframe 上的“data-fakeid”中存储一个临时 ID（可能是服务器端生成的），然后遍历每个 iframe 并设置 ID，添加方法，然后删除ID，因为它必须是唯一的..或其他东西。可悲的是，我需要推动这件事。

所以，我试图澄清一些事情。希望您能理解 - 提前致谢。

【问题讨论】：

你有这个例子吗？
这是它的 jsfiddle 版本。 jsfiddle.net/DMPpa
那么你到底想实现什么我不确定我是否遵循
什么？我正在告诉你我想要实现什么，什么是行不通的。我需要一个适当的解决方法来避免在 div-1 和 div-2 上使用相同的 ID，因为如果我这样做了，例如在示例中，.flexslider('api-method') 会中断。我附加/预先添加这些 div。
我也不确定您要达到的目标是什么。如果它正在暂停/播放播放器被激活/停用的特定幻灯片，请查看此jsFiddle。如果不是，请尝试以我们可以重复的方式解释一个典型场景、发生了什么以及它与预期结果有何不同。

标签： jquery flexslider froogaloop

【解决方案1】：

好吧，所以我最终做了什么（并帮助未来遇到相同“问题”的开发人员，这实际上并不是真正的问题）：

我最终通过 javascript 生成了 ID（因为我正在修改 DOM；追加和前置时的 div 和 iframe，因此无法在服务器端完成），然后调用“new”的 Froogaloop addEvent带有客户端生成 ID 的 iframe，以及在“新”DOM 结构上重新初始化 flexslider。这是最合乎逻辑的解决方案，但是我太紧张了，无法理解。

我的实际问题是，我需要一种方法将 vimeo-videos 的处理程序与 Froogaloop 和 Flexslider 相结合，而不需要在它们上设置 ID。当在 vimeo 视频 (iframe) 等元素上具有相同的 ID 时，两者都完全不起作用（好吧，它不应该！）。

感谢你们给我的帮助！祝你好运！

【讨论】：