Phóng to thu nhỏ: Nhận phần tử hiện tại trong gọi lại

Question

Trong cửa sổ bật lên Magnific, tôi muốn nhận thuộc tính trong liên kết được nhấp và sử dụng trong hàm gọi lại (sử dụng gọi lại: mở) để thực hiện một số thay đổi trong DOM.

Tôi làm cách nào để thực hiện việc này? Ví dụ, trong đoạn mã bên dưới, nó sẽ trả về 'nó hoạt động' thành bàn điều khiển. Thay vào đó nó in 'không làm việc'. Hãy giúp tôi!!

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

Answer 1

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

và sử dụng dữ liệu thuộc tính, với ví dụ dữ liệu Myatt - đó nhận được:

$(this).data('myatt') 

Answer 2

Đầu tiên, tôi khuyên bạn nên bạn sử dụng thuộc tính dữ liệu (data-tùy chỉnh = "foo ") hoặc thuộc tính đã biết.

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

Tôi không biết nếu một cách tốt hơn tồn tại. Trên thực tế bạn có thể đọc tài liệu của họ về phương pháp công cộng và bạn sẽ thấy ở đó. Tôi đã thử nghiệm mã trên và tất cả mọi thứ hoạt động tốt :)

Answer 3

Đối Magnific Popup v0.9.8

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

Answer 4

Yếu tố nhấp có thể được truy cập trong callback sử dụng:

this.st.el 

Bên trong gọi lại, "this" đề cập đến $ .magnificPopup.instance.

Theo tính chất công cộng:

"magnificPopup.st.el // Target nhấp yếu tố đó mở cửa sổ bật lên (chỉ hoạt động nếu cửa sổ bật lên được khởi tạo từ phần tử DOM)"

Answer 5

Ngoài ra, bên trong open: function(item) {}, this.content sức help .. Nó sẽ trả về div của nội dung được hiển thị. hữu ích với change: function() {}. Hy vọng nó sẽ giúp một người như tôi.

Answer 6

Đối v 0.9.9:.

this.currItem.el