jqueryは変数を保持し、毎回0に設定しないでください。

Question

私のコードは画像を1回だけ回転させてから、動作を停止します。 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; FUNCT