选择带有放大弹出窗口的下一个弹出窗口（jQuery）

我正在使用放大弹出库。我需要有下一个最近的弹出div内容加载时，点击链接。它的工作硬编码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'
    }
});

第一个弹出内容



第二个弹出内容



第三个弹出内容

$（'.open popup link'）。放大弹出窗口({
项目：{
//src:$（'.white popup'），//工作，但加载所有
src:$（this）.next（'.white popup'），//应该只加载下一个popup div
键入：“内联”
}
});

---

Fiddle:

当您将对象文本传入.magnificPopup（）函数时，您不在函数内部。换句话说，你仍然在全球范围内。因此，

这个

仍然是指窗口，而不是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'
      }
    })
});

您可以在中看到一个工作示例