選擇下一個彈出與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' 
    } 
}); 

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

Answer 1

當你傳遞你的對象到.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/

看到一個工作示例