具有事件处理程序的Javascript变量作用域行为异常

Question

<script>  
            var rotateFlag = 0;
            $(document).ready(function(){
                console.log(rotateFlag);
                dropdown();
                getdown();
            });
            function dropdown(){
                if(rotateFlag===0){
                    $('.comment-box').on('click',function(event){
                        console.log("when rotateFlag is 0", rotateFlag);
                        $(this).css('transform','rotate(-90deg)');
                        rotateFlag = 1; 
                    });
                }
                if(rotateFlag===1){
                    $('.comment-box').on('click',function(event){
                        console.log("when rotateFlag is 1", rotateFlag);
                        $('.comment-box').css('transform','rotate(0deg)');
                        rotateFlag = 0;
                    })
                }
            }
            function getdown(){ 
                $(document).on('click',function(event){

                    if( $(event.target)[0].className !=  'comment-box' && 
                        $(event.target)[0].className != 'dot' ){
                        console.log('getdown');
                        $('.comment-box').css('transform', 'rotate(0deg)'); 
                        rotateFlag = 0;
                    }
                })
            }
    <script>  
                <div class="comment-box"> 
                    <span class="dot"></span>
                    <span class="dot"></span>
                    <span class="dot"></span>
                </div>

I tried to transform element div named comment-box , and I faced one problem that variable rotateFlag printed 1 even in if(rotateFlag ===0) . It's weird.. look at the code below:

            var rotateFlag = 0;
            $(document).ready(function(){
                console.log(rotateFlag);
                dropdown();
                getdown();
            });
            function dropdown(){
                if(rotateFlag===0){
                    $('.comment-box').on('click',function(event){
                        console.log("when rotateFlag is 0", rotateFlag);
                        $(this).css('transform','rotate(-90deg)');
                        rotateFlag = 1; 
                    });
                }

I assigned variable rotateFlag , and let button event handles only when rotateFlag has value 1. The first time I click 'comment-box' it prints when rotateFlag is 0 0 however, from twice, it returns like this. when rotateFlag is 0 1

weird .... can't get Ideas why this happens.

Answer 1

It's not weird.. When you call dropdown function(at the first time), rotateFlag is 0.

if(rotateFlag===0){
                $('.comment-box').on('click',function(event){
                    console.log("when rotateFlag is 0", rotateFlag);
                    $(this).css('transform','rotate(-90deg)');
                    rotateFlag = 1; 
                });
            }

So above click event is applied always.

If you want to apply another click event, off the click event and call dropdown function when getdown function called.