jQuery 华丽的弹出窗口：在回调中获取当前元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16885863/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Magnific popup: Get current element in callback
提问by Imme22009
In Magnific Popup, I want to get an attribute in the link that is clicked and use it in a callback function (using callbacks: open) to make some changes in the DOM.
在 Magnific Popup 中，我想在被点击的链接中获取一个属性，并在回调函数中使用它（使用回调：打开）以在 DOM 中进行一些更改。
How can I do this? For example, in the code below, it should return 'it works' to console. Instead it prints 'doesnt work'. Please help!!
我怎样才能做到这一点？例如，在下面的代码中，它应该返回 'it works' 到控制台。相反，它打印“不起作用”。请帮忙！！
<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>
回答by Konpaka
For Magnific Popup v0.9.8
对于 Magnific Popup v0.9.8
var magnificPopup = $.magnificPopup.instance,
cur = magnificPopup.st.el;
console.log(cur.attr('myatt'));
回答by stefanz
First, i recommend to you to use the data attribute ( data-custom="foo" ) or a known attribute.
首先，我建议您使用数据属性（ data-custom="foo" ）或已知属性。
HTML :
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 :
jQuery ：
$('.popup').magnificPopup({
type : 'image',
callbacks : {
open : function(){
var mp = $.magnificPopup.instance,
t = $(mp.currItem.el[0]);
console.log( t.data('custom') );
}
}
});
I do not know if a better way exists. Actually you can read their documentation about public methods and you will see there. I tested the code above and everything works fine :)
我不知道是否存在更好的方法。实际上你可以阅读他们关于公共方法的文档，你会在那里看到。我测试了上面的代码，一切正常:)
回答by user3364436
For v. 0.9.9:
对于 v. 0.9.9：
this.currItem.el
this.currItem.el
回答by maximkou
// "item.el" is a target DOM element (if present)
// "item.src" is a source that you may modify
open: function(item) {}
and use data-attributes, to example data-myatt - that get:
并使用数据属性，例如 data-myatt - 得到：
$(this).data('myatt')
回答by jwinn
The clicked element can be accessed within the callback using:
可以使用以下方法在回调中访问被点击的元素：
this.st.el
Inside the callback, "this" refers to $.magnificPopup.instance.
在回调中，“this”指的是 $.magnificPopup.instance。
Under public properties:
在公共属性下：
"magnificPopup.st.el // Target clicked element that opened popup (works if popup is initialized from DOM element)"
“magnificPopup.st.el // 目标点击打开弹出窗口的元素（如果弹出窗口是从 DOM 元素初始化的，则工作）”
回答by StinkyCat
Also, inside open: function(item) {}, this.contentmight help.. It will return the div of the content being shown. useful with the change: function () {}as well. Hope it helps someone like me.
此外， inside open: function(item) {},this.content可能会有所帮助.. 它将返回所显示内容的 div。也有用change: function () {}。希望它可以帮助像我这样的人。
