使用 Magnific Popup (jQuery) 选择下一个弹出窗口答案

【问题标题】：Select next popup with Magnific Popup (jQuery)使用 Magnific Popup (jQuery) 选择下一个弹出窗口
【发布时间】：2013-05-30 18:25:32
【问题描述】：

我正在使用 Magnific Popup 库。单击链接时，我需要加载下一个最近的 popup-div-content 。它适用于硬编码的 id，但我需要它才能正常工作（下一个），因为这将进入 cms，我不知道正在加载多少项目。

<a href="#" class="open-popup-link">1st link</a>
<div class="white-popup mfp-hide">
    <p>First popup content</p>
</div><br>

<a href="#" class="open-popup-link">2nd link</a>
<div class="white-popup mfp-hide">
    <p>Second popup content</p>
</div><br>

<a href="#" class="open-popup-link">3nd link</a>
<div class="white-popup mfp-hide">
    <p>Third popup content</p>
</div>

$('.open-popup-link').magnificPopup({
    items: {
        // src: $('.white-popup'), // works but loads all
        src: $(this).next('.white-popup'), // should load only next popup div
        type: 'inline'
    }
});

小提琴：http://jsfiddle.net/BinaryAcid/XadjS/2/

【问题讨论】：

标签： jquery magnific-popup

【解决方案1】：

当您将对象字面量传递给 .magnificPopup() 函数时，您不在函数内部。换句话说，您仍然在全局范围内。所以this 仍然指的是窗口，而不是 div，这正是您在这里所期望的。

为了使用this 引用DOM 节点，您可以将弹出窗口绑定到JQuery 的.each() 中，如下所示：

$('.open-popup-link').each(function(){
    $(this).magnificPopup({
      items: {
      src: $(this).next('.white-popup'), // should load the next popup
      type: 'inline'
      }
    })
});

您可以在

查看一个工作示例

http://jsfiddle.net/XadjS/4/

【讨论】：