Question

我有一个脚本，我每次点击时都会将按钮旋转45度。我有一个带有加号的文章列表，当你单击它时，它会旋转45度到X并切换打开一个段落，再次点击它再次向前旋转45度到一个加号并切换段落关闭。我有很多这些按钮，所以我试着写一些可以适用于所有按钮的东西。其中一个可以立即打开，我遇到了一个问题，当一个打开而另一个被点击时，第二个旋转90度而不是45度我不是百分之百确定为什么但我认为它与变量的设置方式有关，但我不确定，如果实际上是问题，我也不确定如何修改它。我的代码发布在下面，我在这里设置了http://jsbin.com/atinap/16/edit

的演示

这是我的JS：

$(".info_btn").css("-webkit-transition", "-webkit-transform 0.25s ease-in-out");

var info_btn_DEG = 0;

$(".info_btn").toggle(function() {
$(this).closest('.article_wrapper').find('.description').slideDown("250");
info_btn_DEG += 45;
$(this).css("-webkit-transform", "rotateZ(" + info_btn_DEG + "deg)");
$(this).fadeTo("200", 0.65);
}, function() {

$(this).closest('.article_wrapper').find('.description').slideUp("200");
info_btn_DEG += 45;
$(this).css("-webkit-transform", "rotateZ(" + info_btn_DEG + "deg)");
$(this).fadeTo("250", 0.3);
});

Answer 1

您需要将角度与每个元素相关联，而不是所有元素都有一个全局角度 - 使用.data（）：

function increaseAngle(elem) {
var oldAngle = $(elem).data('angle');
var newAngle = oldAngle + 45;
$(elem)
    .css("-webkit-transform", "rotateZ(" + newAngle + "deg)")
    .data('angle', newAngle);
}

$(".info_btn")
.css("-webkit-transition", "-webkit-transform 0.25s ease-in-out")
.data('angle', 0);
.toggle(function() {
    $(this).closest('.article_wrapper').find('.description').slideDown(250);
    increaseAngle(this);
    $(this).fadeTo(200, 0.65);
}, function() {
    $(this).closest('.article_wrapper').find('.description').slideUp(200);
    increaseAngle(this);
    $(this).fadeTo(250, 0.3);
});

旋转btn增量45度不起作用

1 个答案: