[英]Combining two functions not working
I attempted to combine two functions in the code below. 我试图在下面的代码中组合两个函数。 All seems to be working except I cannot get the variable currentImage.metaData.something
to work in the second function. 所有似乎都工作,除了我无法获得变量currentImage.metaData.something
在第二个函数中工作。 I appreciate your advice. 我感谢你的建议。
<script type="text/javascript" src="code.photoswipe-2.1.5.min.js"></script>
<script type="text/javascript">
(function(window, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var
options = {
getImageMetaData: function(el){
return {
href: el.getAttribute('href'),
something: el.getAttribute('data-something'),
anotherThing: el.getAttribute('data-another-thing')
}
}
},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
instance.addEventHandler(PhotoSwipe.EventTypes.onDisplayImage, function(e){
var currentImage = instance.getCurrentImage();
console.log(currentImage.metaData.something);
console.log(currentImage.metaData.anotherThing);
});
}, false);
}(window, window.Code.Util, window.Code.PhotoSwipe));
(function(window, Util, PhotoSwipe){
document.addEventListener('DOMContentLoaded', function(){
var
sayHiEl,
sayHiClickHandler = function(e){
alert('yo!!!');
}
options = {
getToolbar: function(){
return '<div class="ps-toolbar-close" style="padding-top: 12px;">Close</div><div class="ps-toolbar-play" style="padding-top: 12px;">Play</div><div class="ps-toolbar-previous" style="padding-top: 12px;">Previous</div><div class="ps-toolbar-next" style="padding-top: 12px;">Next</div><div class="say-hi" style="padding-top: 12px;">Say Hi!</div>';
// NB. Calling PhotoSwipe.Toolbar.getToolbar() wil return the default toolbar HTML
}
},
instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
// onShow - store a reference to our "say hi" button
instance.addEventHandler(PhotoSwipe.EventTypes.onShow, function(e){
sayHiEl = window.document.querySelectorAll('.say-hi')[0];
});
// onToolbarTap - listen out for when the toolbar is tapped
instance.addEventHandler(PhotoSwipe.EventTypes.onToolbarTap, function(e){
if (e.toolbarAction === PhotoSwipe.Toolbar.ToolbarAction.none){
if (e.tapTarget === sayHiEl || Util.DOM.isChildOf(e.tapTarget, sayHiEl)){
alert(currentImage.metaData.anotherThing);
}
}
});
// onBeforeHide - clean up
instance.addEventHandler(PhotoSwipe.EventTypes.onBeforeHide, function(e){
sayHiEl = null;
});
}, false);
}(window, window.Code.Util, window.Code.PhotoSwipe));
You're declaring the currentImage
variable within the first function. 您在第一个函数中声明了currentImage
变量。 Variables created with the var
keyword are function-scoped, meaning that it isn't visible outside of the function (and hence not visible in your second function, in this case). 使用var
关键字创建的变量是函数范围的,这意味着它在函数外部不可见(因此在第二个函数中不可见,在本例中)。
I would probably suggest some more general code reorganization, but an easy fix would be to declare the variable above both of your functions, making it visible to both. 我可能会建议一些更通用的代码重组,但一个简单的解决方法是将变量声明在两个函数之上,使两者都可见。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.