2

我正在使用 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/

4

1 回答 1

2

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

为了使用 引用 DOM 节点this，您可以将弹出窗口绑定在 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/

于 2013-05-30T18:49:57.333 回答