Question

目前我在下面有JS。我尝试使用smoothstate slideout.close();运行onStart事件。我的代码如下，我目前在控制台中收到错误。请有人帮帮我。

感谢。

＆＃13;

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

＆＃13;

Answer 1

您已经创建了一个名为slideout的全局函数，其中有一个名为slideout的局部变量，它是引用Slideout对象的局部变量 - 您无法访问来自其他函数的局部变量。当您尝试在功能上使用正在寻找slideout.close()方法的.close()时。

一个修复方法是更改变量或函数的名称，并使变量也是全局变量，以便您可以在任何地方访问它。但添加更多全局变量是混乱的。

我认为将所有代码组合到单个文档就绪处理程序中应该没问题，因此所有内容都在同一范围内而不需要任何全局变量（您仍然需要为变量使用不同的名称）。 / p>

我无法测试以下内容，因为我没有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');
});

功能未正确触发

1 个答案: