회전 btn 증가 45 도가 작동하지 않습니다.

Question

클릭 할 때마다 45도 회전하는 데 사용하는 스크립트가 있습니다. 나는 그들 옆에있는 더하기 기호가있는 기사 목록을 가지고 있으며 그것을 클릭하면 X로 45도 회전하고 단락을 열거 나 다시 45도를 플러스로 다시 돌리고 닫힌 단락을 토글합니다. 나는이 버튼들을 많이 가지고있어서 그들 모두에게 적용 할 수있는 것을 쓰려고 노력했다. 둘 중 하나 이상을 한 번에 열 수 있습니다. 한 사람이 열리고 다른 사람이 클릭되면 두 번째 사람이 45 대신 90도 회전하고 100 % 확신 할 수없는 문제가 발생합니다. 변수 설정 방법과 관련이 있다고 생각하지만 다시는 확실하지 않으며 실제로 문제가있는 경우이를 수정하는 방법을 모르겠습니다.

당신은 각 요소와 각도를 연결해야

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

, 모든 요소에 대한 하나 개의 글로벌 각도가없는 : 내 JS 내 코드는 아래에 게시 내가 여기에 설정 http://jsbin.com/atinap/16/edit 여기

의 데모가있다 -) (.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); 
});