为什么有的时候点击事件触发第二次才执行？

Question

function comeBack(comeBack,flag){    if(this.flag){            $(comeBack).css('display','block');        this.flag = false;    }else{        $(comeBack).css('display','none');        this.flag = true;    };};$('#comeBack').on('click',function(){    var flag1 = true;    comeBack('#comeBack .img2',flag1);});

Answer 1

function comeBack(comeBack,flag){

    //这里用this.flag是给你的window加了flag属性

    //第一次没有初始化，是undefined，走else，else里设为true，第二次走if

    if(this.flag){    

        $(comeBack).css('display','block');

        this.flag = false;

    }else{

        $(comeBack).css('display','none');

        this.flag = true;

    };

};

$('#comeBack').on('click',function(){

    //这个flag1是局部变量，每次进来都会初始化一次，传进去永远是true，只执行if，不是没有效果

    var flag1 = true;

    comeBack('#comeBack .img2',flag1);

});

正确做法：flag放在外面，作为全局变量

//实际声明的是window.flag

var flag = true;

//实际声明的是window.comeBack，它的this就是window

function comeBack(comeBack){

    if(this.flag){    

        $(comeBack).css('display','block');

        this.flag = false;

    }else{

        $(comeBack).css('display','none');

        this.flag = true;

    };

};

$('#comeBack').on('click',function(){

    comeBack('#comeBack .img2');

});

推荐做法：使用类+css控制

<div id="#comeBack">

    <img class="img2 hidden"></img>

</div>

.hidden {

    display: none;

}

$('#comeBack').on('click',function(){

    $img = $(this).children('.img2');

    if($img.hasClass('hidden')){

        $img.removeClass('hidden');

    }else{

        $img.addClass('hidden');

    }

});

或者data api

<div id="comeBack" data-status="hidden">

    <img class="img2"></img>

</div>

$('#comeBack').on('click',function(){

    $this = $(this);

    status = $this.data('status');

    if(status === 'hidden'){

        $this.children('.img2').css('display', 'block');

        $this.data('status', 'show');

    }else{

        $this.children('.img2').css('display', 'none');

        $this.data('status', 'hidden');

    }

});