Question

我的代码只旋转一次图像 - 90＆＃39;然后停止工作。就像angle每次调用它时总是设置为0一样。我该如何解决？我需要将角度保持在变量中。

FILE1.js

$(function () {
  $('.rotate-receipt').on('click', function() {
    handleImage.rotateImage(0, this);
  });
});

FILE2.js

var handleImage = (function () {
  return {
    rotateImage: function (angle, element) {
      var index = $(element).data('button-index');
      angle = (angle + 90)%360;
      var className = 'rotate' + angle;
      $('#receipt-image-'+index).removeClass().addClass(className);
    }
  };
}());

Answer 1

您必须捕获您想要“记住”的变量。

文件1：

$(function () {
  $('.rotate-receipt').on('click', rotateImage(0, $('.rotate-receipt')));
});

文件2：

var rotateImage = function (angle, element) {
  var $e = $(element);
  var index = $e.data('button-index');
  var target = $('#receipt-image-'+index);
  return function () {
      angle = (angle + 90)%360;
      var className = 'rotate' + angle;
      target.removeClass().addClass(className);
    };
};

Answer 2

您必须获取一个全局变量，以便在加载页面时将其初始化为0。不是每次都像你一样在点击事件上。看看这个。

$(function () {
  var angle = 0;
  
  $('.rotate-receipt').on('click', function() {
    handleImage.rotateImage(this);
  });
  
  var handleImage = (function () {
  return {
    rotateImage: function (element) {
      var index = $(element).data('button-index');
      angle = (angle + 90)%360;
      console.log('Angle::'+angle);
      var className = 'rotate' + angle;
      console.log('Class Name::'+className);
      $('#receipt-image-'+index).removeClass().addClass(className);
    }
  };
}());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="rotate-receipt" data-button-index="1">Rotate</button>
<div id="receipt-image-1">Image to rotate</div>

Answer 3

我让它自己工作，只是在功能之外var angle = 0;

jquery保留变量，不要每次都设置为0

3 个答案: