仅旋转此 div，而不旋转其他 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

您可以将 data- 属性添加到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/