このdivだけを回転します。他のものはありません

Question

クリックごとにdivを45度回転させたいとします。期待どおりに動作します。このページには3つの'expand-btn 'クラス名があります。何が起こるか、クリックするとすべての '.expand-btn'がトリガされます。

私はこの「拡張-BTN」をでトリガします。他にはない。

JS：

var _rotation = 0; 

$.fn.rotate = function(degrees) { 
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'}); 
}; 

$('.expand-btn').click(function() { 
    _rotation += 45; 
    $(this).rotate(_rotation); 
}); 

HTML：

<div class="expand-btn" id="test1"> 
    <a href="javascript:void(0);" data-toggle="collapse">+</a> 
</div> 
<div class="expand-btn" id="test2"> 
    <a href="javascript:void(0);" data-toggle="collapse">+</a> 
</div> 
<div class="expand-btn" id="test3"> 
    <a href="javascript:void(0);" data-toggle="collapse">+</a> 
</div> 

Answer 1

あなたがオブジェクトのそれぞれの回転値の明確なストレージを持っている必要があります。たとえば、そのためjQuery.data()を使用します。

$.fn.rotate = function(delta) { 
    // get the current stored rotation, or 0 if none was currently stored 
    var degrees = $(this).data().rotation || 0; 

    // add the delta to this value 
    degrees += delta; 

    // store the new value with the object 
    $(this).data().rotation = degrees; 

    // set the transformation 
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'}); 
}; 

$('.expand-btn').click(function() { 
    $(this).rotate(45); 
}); 

のjQueryを使用して、集合の要素を反復処理し、個別のそれぞれのコードを適用する必要があります正しく設定拡張します。 $.fn.rotateの記述方法は、最初の値に基づいてセット内のすべての要素のローテーションを設定します。

か、その実際の値を取得するために、現在のtransformを解析。

Answer 2

あなたは、現在の角度を保存することができDIVにデータ - 属性を追加することができます。

HTML：

<div class="expand-btn" id="test1" data-degrees="0"> 
    <a href="javascript:void(0);" data-toggle="collapse">+</a> 
</div> 
<div class="expand-btn" id="test2" data-degrees="0"> 
    <a href="javascript:void(0);" data-toggle="collapse">+</a> 
</div> 
<div class="expand-btn" id="test3" data-degrees="0"> 
    <a href="javascript:void(0);" data-toggle="collapse">+</a> 
</div> 

JS：

$(document).ready(function(){ 
    $('.expand-btn').click(function() { 
     var currentDegrees = $(this).data("degrees"); 
     currentDegrees += 15; 
     $(this).css({'transform' : 'rotate(' + currentDegrees + 'deg)'}); 
     var currentDegrees = $(this).data("degrees", currentDegrees); 
    }); 
}); 

例：https://jsfiddle.net/tejsoft/dwxb1a1b/