jQuery Selector Click And Toggle 처리 / default toggle state

toggle을 이용할 때, $.fn.toggle()을 이용할 수 있습니다. 

$(function () {
    var $reactionToggleBtn = $("a[name='reaction-toggle']");
 
    $reactionToggleBtn.toggle(function(){    
        // On
    }, function(){
        // Off
    });
});

만약, 조건에 따라 toggle기능을 이용하려면 어떻게 해야 할까?

예를 들어, toggle을 하기전의 로그인 유무를 판단하고 싶다?

아래와 같이 $.fn.click() 이벤트를 줍니다.

xor 연산자를 통해 해당 element의 상태가 1인지 0인지 내부에서 판단해서 function을 호출하면 되겠습니다.

$(function () {
    var isLogin = false;
    var $reactionToggleBtn = $("a[name='reaction-toggle']");
 
    /* event */
    $reactionToggleBtn.click(function () {
        if (isLogin) {
            var el = this;
            return (el.tog ^= 1) ? toggleOn(el) : toggleOff(el);
        } else {
           // confirm
        }
    });
 
    /* function */
    function toggleOn(el) {
        var id = $(el).data("id");
        // proc function
        // $(el).css("color","red");
    }
 
    function toggleOff(el) {
        var id = $(el).data("id");
        // proc function
        // $(el).css("color","");
    }
});

혹시, toggle 상태를 On으로 만들고 싶을 때?

$(selector).data("open")을 하면 되겠습니다.

※ $(selector).data("close")도 있습니다.

$(function () {
    var $reactionToggleBtn = $("a[name='reaction-toggle']");
 
    // default toggle open state
    function initOpenToggle(){
        $reactionToggleBtn.data("open");
    }
 
    // default toggle close state
    function initCloseToggle(){
        $reactionToggleBtn.data("close");
    }
 
    function initToggleInfo(){
        var toggleOn = true;
        // ajax 
        // onSuccess
        if(toggleOn){initOpenToggle();}
        else {initCloseToggle();}
        // onError
    }
    initToggleInfo();
});