2013-06-02 10 views
10

W dodatku Magnific, chcę uzyskać atrybut w klikniętym łączu i użyć go w funkcji wywołania zwrotnego (za pomocą wywołań zwrotnych: open), aby wprowadzić pewne zmiany w DOM.Magnific popup: Pobierz bieżący element w oddzwonieniu

Jak mogę to zrobić? Na przykład w poniższym kodzie powinien zwrócić "działa" do konsoli. Zamiast tego drukuje "nie działa". Proszę pomóż!!

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

Odpowiedz

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

i wykorzystywać dane atrybuty, na przykład danych-Myatt - to otrzymujemy:

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

pierwsze, polecam wam użyć atrybutu danych (data-niestandardowy = "foo ") lub znany atrybut.

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

ja nie wiem, czy istnieje lepszy sposób. Właściwie możesz przeczytać ich dokumentację na temat publicznych metod, a zobaczysz tam. Testowałem powyższy kod i wszystko działa poprawnie :)

+2

zauważyć powyżej działa tylko na starszych wersjach Magnific podręcznym. Jeśli używasz czegoś z poprzedniej wersji 0.9.8, zobacz odpowiedź @Konpaka poniżej. – Styledev

12

Dla Magnific Popup v0.9.8

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

klikniętego elementu mogą być dostępne w ramach zwrotnego przy użyciu:

this.st.el 

Wewnątrz zwrotnego, "this" odnosi się do $ .magnificPopup.instance.

Pod publicznych właściwości:

"magnificPopup.st.el // docelowa kliknięty element, który otworzył okienko wyskakujące (działa jeśli jest inicjowany z elementu DOM)"

0

Również wewnątrz open: function(item) {}, this.content potęga help .. Zwróci div wyświetlanej zawartości. przydatne także z change: function() {}. Mam nadzieję, że pomaga komuś takiemu jak ja.

Powiązane problemy