結合兩個功能不起作用

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關鍵字創建的變量是函數范圍的，這意味着它在函數外部不可見（因此在第二個函數中不可見，在本例中）。

我可能會建議一些更通用的代碼重組，但一個簡單的解決方法是將變量聲明在兩個函數之上，使兩者都可見。