Question

使用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>

以下是我正在努力工作的内容，同样的照片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);
});

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

感谢您的时间：）

Answer 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>

Answer 2

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

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

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

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

2 个答案: