函數沒有正確觸發

Question

目前我有下面的JS。我正在嘗試運行slideout.close();事件，其中smoothstate onStart。我的代碼在下面，我目前在控制檯中出現錯誤。有人能幫助我嗎？

感謝。

$(document).ready(function() { 
 
    slideout(); 
 
}); 
 

 
function slideout() { 
 
    var slideout = new Slideout({ 
 
     'panel': document.getElementById('slideout-content'), 
 
     'menu': document.getElementById('slideout-nav'), 
 
     'padding': 256, 
 
     'tolerance': 70, 
 
     'side': 'right' 
 
    }); 
 

 
    $('.mobile-nav__icon').on('click', function() { 
 
     slideout.toggle(); 
 
    }); 
 
} 
 

 
$(function(){ 
 
    'use strict'; 
 
    var options = { 
 
    prefetch: true, 
 
    cacheLength: 2, 
 
    onStart: { 
 
     duration: 860, 
 
     render: function ($container) { 
 
     $container.addClass('is-exiting'); 
 
     smoothState.restartCSSAnimations(); 
 
     slideout.close(); 
 
     } 
 
    }, 
 
    onReady: { 
 
     duration: 0, 
 
     render: function ($container, $newContent) { 
 
     $container.removeClass('is-exiting'); 
 
     $container.html($newContent); 
 
     } 
 
    }, 
 
    onAfter: function() { 
 
     slideout(); 
 
    } 
 
    }, 
 
    smoothState = $('#animate-wrapper').smoothState(options).data('smoothState'); 
 
});

Answer 1

您已經創建了一個名爲slideout全局函數，在其中你有一個局部變量叫slideout那就是指Slideout對象的一個​​ - 你不能訪問本地來自其他功能的變量。當您嘗試使用slideout.close()正在尋找.close()方法函數。

一個修復方法是更改​​變量或函數的名稱，並將變量設置爲全局變量，以便您可以隨時訪問它。但是添加更多全局變量很麻煩。我認爲將所有代碼合併到單個文檔就緒處理程序中應該沒有問題，因此所有內容都在同一個作用域中，而不需要任何全局變量（您仍然需要爲變量使用不同的名稱）。

我無法測試以下，因爲我沒有什麼Slideout是，但是：

$(document).ready(function() { 
    'use strict'; 

    var slideout; // variable that is local to the doc ready handler function 
       // and accessible to all code within that handler 

    function initSlideout() { // function renamed 
    slideout = new Slideout({ // assign to variable declared above 
     'panel': document.getElementById('slideout-content'), 
     'menu': document.getElementById('slideout-nav'), 
     'padding': 256, 
     'tolerance': 70, 
     'side': 'right' 
    }); 
    } 
    initSlideout(); 

    $('.mobile-nav__icon').on('click', function() { 
    slideout.toggle(); 
    }); 

    var options = { 
    prefetch: true, 
    cacheLength: 2, 
    onStart: { 
     duration: 860, 
     render: function ($container) { 
     $container.addClass('is-exiting'); 
     smoothState.restartCSSAnimations(); 
     slideout.close(); 
     } 
    }, 
    onReady: { 
     duration: 0, 
     render: function ($container, $newContent) { 
     $container.removeClass('is-exiting'); 
     $container.html($newContent); 
     } 
    }, 
    onAfter: function() { 
     initSlideout(); 
    } 
    }, 
    smoothState = $('#animate-wrapper').smoothState(options).data('smoothState'); 
});