2013-06-02 134 views
10

Magnificent Popupでは、クリックしたリンク内の属性を取得し、コールバック関数(callbacks:openを使用)で使用してDOMを変更します。Magnificent Popup:コールバックの現在の要素を取得

どうすればいいですか?たとえば、以下のコードでは、 'それは動作します'というメッセージがコンソールに返されます。代わりに 'doesnt work'を表示します。助けてください!!

<a href="#test-popup" class="open-popup-link" myatt="hello">Show inline popup</a> 

<script src="jquery.magnetic.custom.js"></script> 

<script> 

    $(document).ready(function() { 
     $('.open-popup-link').magnificPopup({ 
     type:'inline', 
     midClick: true, 
     callbacks: { 
      open: function() { 

      if ($(this).attr('myatt')=="hello") 
      { 
       // do something 
       console.log("it works"); 
      } 
      else 
      { 
       console.log("doesnt work"); 
      } 

      }, 
      close: function() { 

      } 
     } 

     }); 
    }); 

</script> 

<div id="test-popup" class="white-popup mfp-hide"> 
    Popup content 
</div> 

答えて

0
// "item.el" is a target DOM element (if present) 
// "item.src" is a source that you may modify 
open: function(item) {} 

と例のデータmyattに、データの属性を使用する - 取得:

$(this).data('myatt') 
6

を第一には、私は、データ属性(データ・カスタム= "FOOを使用することをあなたにお勧めします")または既知の属性です。

HTML:

<a href="photo.jpg" class="popup" data-custom="dsaad">Do it!</a> 
    <a href="photo.png" class="popup" data-custom="mycustomdata">Do it!</a> 

のjQuery:

$('.popup').magnificPopup({ 
    type : 'image', 
    callbacks : { 
    open : function(){ 
     var mp = $.magnificPopup.instance, 
      t = $(mp.currItem.el[0]); 

     console.log(t.data('custom')); 
    } 
    } 
}); 

良い方法が存在するかどうかはわかりません。実際にはパブリックメソッドについてのドキュメントを読むことができ、そこに表示されます。 、コールバックインサイド

this.st.el 

:私は上記のコードをテストし、すべてが

var magnificPopup = $.magnificPopup.instance, 
       cur = magnificPopup.st.el; 
console.log(cur.attr('myatt')); 
+2

上記のみMagnificポップアップの古いバージョンのために働くに注意すること。過去のバージョン0.9.8を使用している場合は、下記の@Konpakaの回答をご覧ください。 – Styledev

12

Magnificポップアップv0.9.8のために正常に動作します"this"は$ .magnificPopup.instanceを指します。パブリックプロパティの下

open: function(item) {}の内側に、また

0

クリックされた要素が使用してコールバック内でアクセスすることができます:)

0

"magnificPopup.st.el //ターゲットは、ポップアップ(ポップアップがDOM要素から初期化されている場合は動作します)を開いた要素をクリックした"、this.contentかもしれませんヘルプ...表示されているコンテンツのdivを返します。 change: function() {}と同様に有用である。それが私のような人に役立つことを願っていますVが

関連する問題