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

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');
    }
});

Answer 2

this.flag? 你再看看，琢磨琢磨

Answer 3

我不加this只执行一次，再点击没有效果，我打印flag，flag的值变成了false，但是就是不执行else下面的语句。我加this的时候，第一次点击走的是else的语句，第二次点击才是从if语句开始执行。why？？？

Answer 4

引用传递,形参实参,作用域 建议重新学习

Answer 5

你在你的函数里 console.log(this.flag);
第一次点击的时候就没有这个值,所以走 else
执行完else this.flag 才赋值为true,所以第二次才走if

Answer 6

每次点击都初始化var flag1 = true;然后又传入true;flag参数永远都是true

Answer 7

this 一般是在构造函数里边用，普通函数慎用。function comeBack(comeBack,flag){} 其中，flag形参传入函数就相当于函数内的局部变量，直接用就行，不要用this！