如何将 .each() 与 flickity 一起使用以仅影响活动的 flickity 实例
How to use .each() with flickity to only affect active flickity instance
我正在尝试在 flickity 的活动实例中定位 iframe,因为我可能在单个页面上有多个 flickity 实例(最终目标是刷新幻灯片中的 iframe,该 iframe 在用户选择了另一张幻灯片)。
我得到这个用于单个幻灯片放映,但是当我在页面上有多个幻灯片放映时我 运行 遇到了问题,因为它会刷新之前选择的所有 iframe,而不仅仅是在当前幻灯片。
下面是我的脚本,其中“.slideshow”是一个轻快的实例,我希望能够在一个页面上有多个。该问题与定位正确的 '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;
});
});
我回答了我自己的问题。问题是我没有像处理 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;
});
});
我正在尝试在 flickity 的活动实例中定位 iframe,因为我可能在单个页面上有多个 flickity 实例(最终目标是刷新幻灯片中的 iframe,该 iframe 在用户选择了另一张幻灯片)。
我得到这个用于单个幻灯片放映,但是当我在页面上有多个幻灯片放映时我 运行 遇到了问题,因为它会刷新之前选择的所有 iframe,而不仅仅是在当前幻灯片。
下面是我的脚本,其中“.slideshow”是一个轻快的实例,我希望能够在一个页面上有多个。该问题与定位正确的 '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;
});
});
我回答了我自己的问题。问题是我没有像处理 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;
});
});