0

ボタンをクリックするたびにボタンを 45 度回転させるために使用しているスクリプトがあります。横にプラス記号が付いた記事のリストがあり、クリックすると 45 度回転して X になり、段落が開きます。もう一度クリックすると、45 度前方に回転してプラスになり、段落が閉じます。私はこれらのボタンをたくさん持っているので、それらすべてに適用できるものを書こうとしていました. それらのうちの 1 つ以上を一度に開くことができ、1 つを開いて別の 1 つをクリックすると、2 つ目の 1 つが 45 度ではなく 90 度回転するという問題が発生しています。その理由は 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

すべての要素に 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);
});
于 2012-11-08T15:50:53.547 に答える