0

我有一个脚本，每次单击按钮时，我都会使用它将按钮旋转 45 度。我有一个文章列表，旁边有一个加号，当你点击它时，它会旋转 45 度变成 X 并切换打开一个段落，再次点击它会再次向前旋转 45 度变成加号并关闭段落。我有很多这样的按钮，所以我试图写一些适用于所有这些按钮的东西。不止一个可以一次打开，我遇到了一个问题，当打开一个并单击另一个时，第二个旋转 90 度而不是 45 度，我不是 100% 确定为什么，但我认为这与变量的设置方式有关，但我又不确定，如果确实是问题，我也不确定如何修改它。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);
});
4

1 回答 1

0

您需要为每个元素关联一个角度，而不是所有元素都有一个全局角度 - 使用 .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);
});
于 2012-11-08T15:50:53.547 回答