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'
    }
});

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

Answer 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/

使用Magnific Popup（jQuery）选择下一个弹出窗口

1 个答案: