2014-09-08 2 views
0

그래서 같은 버튼을 toggle을 사용하고 있습니다 : 더 아래로 내 코드에서 jQuery 재설정 토글 상태?

$('#button123').toggle(function() { 
     $("#button123").text("-"); 

     $("#slideDiv").slideDown("fast", function() { 

     }); 
}, function() { 
     $("#button123").text("+"); 

     $("#slideDiv").slideUp("fast", function() { 

     }); 
}); 

내가 토글 상태를 "재설정"할. slideDiv 슬라이드를 다시 만듭니다.

$("#button123").text("+"); 

    $("#slideDiv").slideUp("fast", function() { 
     // Animation complete. 
    }); 

문제는 내가 두 번 button123을 눌러야 해당 코드를 실행 한 후 토글 다시 작업 할 수 있다는 것입니다 :

은 현재 내가 의해 그렇게 노력하고 있어요. 나는 어떻게 든 그것을 다시 설정할 필요가 있기 때문에 이것이라고 추측하고 있습니까?

아이디어가 있으십니까?

+1

당신이 밖으로이 코드 바이올린의 다음 수 게시 하시겠습니까? – Ajey

+0

이'.toggle()'사용은 최근 버전의 jQuery에서 제거되었으므로 완전히 다시 작성해야합니다. 자신의 변수를 사용하여 상태를 추적하면 쉽게 재설정 할 수 있습니다. – Barmar

+0

문제는'toggle' 외부에서 플러그인이 변경 사항을 알지 못하고 상태를 업데이트하고 변경을 다시 시도하기 때문입니다 ... 이것이 토글이 작동하지 않는 이유입니다 –

답변

1

토글 기능은 내부 메커니즘을 사용하여 실행될 두 콜백을 결정합니다. 그래서 그것은 증분 카운터라고 가정합니다. 값이 홀수이면 첫 번째 콜백, 두 번째 콜백이 실행되면 토글 핸들러 외부에있는 요소의 텍스트와 표시를 업데이트하면 내부 카운터가 실행되지 않습니다. 따라서 toggle은 텍스트가 +으로 변경된다는 사실을 알지 못하기 때문에 두 번째 핸들러를 호출하는 토글이 발생합니다 (이전 클릭 핸들러가 실행 된 경우).

한 가지 가능한 해결책은 (또 다른 이유는 토글 1.9에서 제거됩니다) 전환 대신 클릭 기반 솔루션을 사용하는 것입니다

$('#button123').click(function() { 
    var text = $.trim($(this).text()); 
    $(this).text(text == "-" ? '+' : '-'); 
    if (text == '-') { 
     $("#slideDiv").slideUp("fast", function() {}); 
    } else { 
     $("#slideDiv").slideDown("fast", function() {}); 
    } 
}); 

데모 : Fiddle

+0

굉장히 감사합니다! – Alosyius