由于这个答案是关于将数据插入 Magnific 的 ajax 调用的原始问题,所以我将在此处发布。经过几个小时的尝试解决这个问题,您应该知道,如果您使用的画廊能够在画廊项目之间移动而不关闭弹出窗口,elementParse
那么当您在查看后访问项目时,使用设置 AJAX 数据将失败它(当弹出窗口仍然打开时)。
这是因为elementParse
它包含在一个检查中,它可以检测一个项目是否已经被“解析”。这里有一个关于发生了什么的小解释:
- 在项目索引 2 处打开画廊。
- 项目还没有被解析,所以它将解析标志设置为
true
并运行elementParse
回调(按该顺序)。你的回调设置了 ajax 选项来获取这个项目的数据,一切都很好。
- 移动(右)到项目索引 3。
- 和上面一样。该项目尚未被解析,因此它运行回调。您的回调设置数据。有用。
- 移动(左)回到项目索引 2。
- 这次该项目已被解析。由于假定的潜在性能原因,它会跳过重新解析项目的元素。您的回调未执行。Magnific 的 ajax 数据设置将保持与项目索引 3 相同。
- AJAX 调用使用旧设置执行,它返回项目索引 3 的数据,而不是呈现给用户。Magnific 会认为它在索引 2 上,但它正在渲染索引 3 的数据。
要解决此问题,您需要挂钩始终在前 ajax 调用中执行的回调,例如beforeChange
.
主要区别在于当前项目没有传递到回调中。幸运的是,此时,magnific 已经更新了指向正确索引的指针。您需要使用以下方法获取当前项目的元素:
var data = {}; // Your key-value data object for jQuery's $.ajax call.
// For non-closures, you can reference mfp's instance using
// $.magnificPopup.instance instead of 'this'.
// e.g.
// var mfp = $.magnificPopup.instance;
// var itemElement = mfp.items[mfp.index].el;
var itemElement = this.items[this.index].el;
// Set the ajax data settings directly.
if(typeof this.st.ajax.settings !== 'object') {
this.st.ajax.settings = {};
}
this.st.ajax.settings.data = data;
这个答案也可以用作当前最高投票的合适替代方案,因为它可以以任何方式工作。