Jquery 仅旋转此div。。不是别人

要在每次单击时将div旋转45度。它工作正常。我在这个页面上有3个“展开btn”类名。发生的情况是，单击它会触发所有“.展开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:

---

您需要对每个对象的旋转值进行不同的存储。例如，您可以使用：

$.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

的方式将根据第一个元素的值设置集合中所有元素的旋转

---

或者解析当前的

变换

以检索实际值。

您需要为每个对象的旋转值进行不同的存储。例如，您可以使用：

$.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

的方式将根据第一个元素的值设置集合中所有元素的旋转

---

或者分析当前的

转换

以检索实际值。

您可以在div中添加一个数据属性，用于存储当前角度

HTML:

---

示例：

您可以在div中添加一个数据属性，用于存储当前角度

HTML:

---

示例：

应该可以工作，因为这个上下文。它不工作，因为所有3个变量都使用了一个旋转变量。href=“javascript:void（0）”是一个非常古老且非常复杂的变量。

javascript:

伪URL过去是，现在不应该在页面脚本中使用。你可能会从我最近写的一篇博文中获益。应该是因为这样的背景。它不起作用，因为所有3个变量都使用了一个

\u旋转

变量。href=“javascript:void（0）”是一个非常古老且非常有用的方法。

javascript:

伪URL过去是，现在不应该在页面脚本中使用。你可能会从我最近写的一篇博文中获益。

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

$(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);
  });
});