如何使用具有flickity的.each()只影响活动flickity实例

Question

我试图在flickity的活动实例中以iframe为目标，因为在一个页面上可能有几个flickity实例(最终目标是刷新幻灯片中的iframe，用户一旦选择了另一个幻灯片就可以查看该幻灯片)。

我把它用于单个幻灯片，但是当页面上有多个幻灯片时，我会遇到问题，因为它会刷新以前选择的所有iframes，而不仅仅是活动幻灯片中的那个。

下面是我的脚本，其中".slideshow“是一个flickity实例，我希望能够在一个页面上有多个实例。这个问题与目标正确的'previousVideoContainer‘有关，后者的父母刚刚触发了"settle.flickity“事件。有什么想法吗？

$('.slideshow').each(function(index, element) {
    // in case the first slide is a video
    var previousVideoContainer = $(this).find('.slideshow-cell.is-selected iframe'); 

    $(this).on('settle.flickity', function () {
        //reload iframe in previously viewed slide to "stop" the video
        $(previousVideoContainer).each(function(ev) {
            var video = this;
            $($(video),parent.document).attr('src',$($(video),parent.document).attr('data-src'));
        }); 
        var videoContainer = $('.carousel-cell.is-selected iframe');
        previousVideoContainer = videoContainer;
    });
});

Answer 1

我回答了我自己的问题。问题是，我没有像previousVideoContainer那样对“previousVideoContainer”变量进行调整。Flickity工作得很好。以下是修改后的代码：

$('.slideshow').each(function(index, element) {
    // in case the first slide is a video
    var previousVideoContainer = $(this).find('.slideshow-cell.is-selected iframe'); 

    $(this).on('settle.flickity', function () {
        //reload iframe in previously viewed slide to "stop" the video
        $(previousVideoContainer).each(function(ev) {
            var video = this;
            $($(video),parent.document).attr('src',$($(video),parent.document).attr('data-src'));
        }); 
        var videoContainer = $(this).find('.slideshow-cell.is-selected iframe');
        previousVideoContainer = videoContainer;
    });
});