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

Question

我正在使用 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'
    }
});

fiddle :http://jsfiddle.net/BinaryAcid/XadjS/2/

Answer 1

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

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

$('.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/