機能が正しく作動しない

Question

現在、以下のJSがあります。私はslideout.close();イベントをsmoothstate onStartで実行しようとしています。私のコードは以下の通りですが、現在コンソールでエラーが発生しています。誰かが私を助けてくれますか？

ありがとうございました。あなたはそのローカルにアクセスすることはできません - あなたはSlideoutオブジェクトを参照するものですslideoutと呼ばれるローカル変数を持って、その中slideoutというグローバル関数を作成しました

$(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.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'); 
});