Question

我试图在下面的代码中组合两个函数。所有似乎都工作，除了我不能让变量currentImage.metaData.something在第二个函数中工作。我感谢你的建议。

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

Answer 1

您在第一个函数中声明currentImage变量。使用var关键字创建的变量是函数范围的，这意味着它在函数外部不可见（因此在第二个函数中不可见，在这种情况下）。

我可能会建议一些更通用的代码重组，但一个简单的解决方法就是在两个函数之上声明变量，使两者都可见。

结合两个功能不起作用

1 个答案: