javascript - 如何将 .each() 与 flickity 一起使用以仅影响事件的 flickity 实例

Question

我正在尝试将 iframe 定位在 flickity 的事件实例中，因为我可能在单个页面上有多个 flickity 实例(最终目标是在用户查看幻灯片时刷新刚刚查看的 iframe)选择另一张幻灯片)。

我让它适用于单个幻灯片，但当页面上有多个幻灯片时，我会遇到问题，因为它将刷新之前选择的所有 iframe，而不仅仅是事件幻灯片中的 iframe。

下面是我的脚本，其中“.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 那样确定“videoContainer”变量的范围。 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;
    });
});