如何在 onclick 函数中获取 javascript api 范围？答案

【问题标题】：how to get javascript api scope inside an onclick function?如何在 onclick 函数中获取 javascript api 范围？
【发布时间】：2018-01-06 22:13:44
【问题描述】：

使用 fotorama，我有一个关于范围的问题。我可以在加载 fotorama html 实例后调用 api（api 调用必须放在 html fotorama div 下方才能工作，如下所示）但是当我将该api调用放入onclick函数中，控制台给出fotorama不是函数的错误。这是有效的代码（替换 fotorama div 中的图像）-

<div class="fotorama">
    <img src="img1.jpg">
    <img src="img2.jpg">
    <img src="img3.jpg">
    <img src="img4.jpg">
</div>

<script language="JavaScript" type="text/javascript">

    // 1. Initialize fotorama manually.
    var $fotoramaDiv = $('.fotorama').fotorama();       

    // 2. Get the API object.
    var fotorama = $fotoramaDiv.data('fotorama');

    fotorama.load([
            {img: 'img1.jpg', thumb: '1_thumb.jpg'},
            {img: 'img1.jpg', thumb: '2_thumb.jpg'},
            {img: 'img1.jpg', thumb: '3_thumb.jpg'}
            ]);             

    // 3. Inspect it in console.
    console.log(fotorama);

</script>

这就是我要开始工作的内容，同样的 fotorama api 调用，但在 onclick 函数中-

  $( ".button" ).click(function() { 

    // 1. Initialize fotorama manually.
    var $fotoramaDiv = $('.fotorama').fotorama();       

    // 2. Get the API object.
    var fotorama = $fotoramaDiv.data('fotorama');

    fotorama.load([
            {img: 'img1.jpg', thumb: '1_thumb.jpg'},
            {img: 'img1.jpg', thumb: '2_thumb.jpg'},
            {img: 'img1.jpg', thumb: '3_thumb.jpg'}
            ]);             

    // 3. Inspect it in console.
    console.log(fotorama);
});

我认为这是范围问题。有谁知道如何让它工作？

感谢您的宝贵时间 :)

【问题讨论】：

可能不是您的实际问题...但是我预见到这个想法的一个问题是每次单击都会实例化fotorama...最好使用$( ".button" ).one("click", function() {，其中.one()只会触发一次。 ;)
感谢@LouysPatriceBessette，但问题仍然存在。 fotorama 不是已经被实例化了吗？
我不明白你的问题。当您调用$(element).fotorama(); 时会发生实例化。如果你在同一个元素上调用它两次或多次，就像任何插件一样......会出现问题。
现在检查是否加载了fotorama.js。我看不出在加载或事件之后实例化有任何区别。

标签： javascript jquery scope fotorama

【解决方案1】：

我在做什么和你在做什么不同？

<html>
  <head>
    <!-- 1. Link to jQuery (1.8 or later), -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 33 KB -->

    <!-- fotorama.css & fotorama.js. -->
    <link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script> <!-- 16 KB -->

  </head>
<body>
  <div class="fotorama">
  </div>

  <button class="button">hit me</button>

  <script language="JavaScript" type="text/javascript">

    $( ".button" ).click(function() { 

      // 1. Initialize fotorama manually.
      var $fotoramaDiv = $('.fotorama').fotorama();       

      // 2. Get the API object.
      var fotorama = $fotoramaDiv.data('fotorama');

      fotorama.load([
              {img: 'http://s.fotorama.io/1.jpg'}
              ]);             

      // 3. Inspect it in console.
      console.log(fotorama);
  });

  </script>
</body>
</html>

或者，您可以尝试将 onclick 初始化放在文档就绪块中：

<html>
  <head>
    <!-- 1. Link to jQuery (1.8 or later), -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 33 KB -->

    <!-- fotorama.css & fotorama.js. -->
    <link  href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script> <!-- 16 KB -->

    <script language="JavaScript" type="text/javascript">
      $( document ).ready(function() {
        $( ".button" ).click(function() { 

          // 1. Initialize fotorama manually.
          var $fotoramaDiv = $('.fotorama').fotorama();       

          // 2. Get the API object.
          var fotorama = $fotoramaDiv.data('fotorama');

          fotorama.load([
                  {img: 'http://s.fotorama.io/1.jpg'}
                  ]);             

          // 3. Inspect it in console.
          console.log(fotorama);
        });
      });

    </script>
  </head>
<body>
  <div class="fotorama">
  </div>

  <button class="button">hit me</button>

</body>
</html>

【讨论】：

你能发布一个完整的示例文件来展示这个问题吗？
感谢@the4thamgo_uk，您的示例有效，但一定有其他东西干扰了我的网站。我让它工作，但我不明白为什么。在这里发布答案。
您的评论中没有链接。您能否再次发布或使用您的代码更新问题。
发布了解决方案作为答案。谢谢！

【解决方案2】：

在按钮单击功能之外初始化 fotorama。

// 1. Initialize fotorama manually.
var $fotoramaDiv = $('.fotorama').fotorama();

 $( ".button" ).click(function() {

【讨论】：