javascript - jquery 函数不会在第一次点击时工作

Question

我是新来的。 我对 JQUERY 有疑问。它不会在第一次点击时起作用，但会按预期在每隔一次点击时起作用。

我这里有 4 个脚本:

1st 在 400px 和 60px 之间切换 div 高度，第二个切换行高，使文本随 div 高度移动，第三个切换文本，第 4 个切换背景。

在我的电脑上，它在第二次点击时正常工作。第一次点击不会执行任何操作。

在 fiddle 上，您可以看到它会在第一次点击时切换文本并出现错误。

$("#map-cover").click((function() {
    var i = 0;
    return function(){
        $(this).animate({height:(++i % 2) ? 400 : 60},{ duration: 200, queue: false });
    
    }
})());
 $("#map-cover").click((function() {
    var i = 0;
    return function(){
        $(this).animate({lineHeight:(++i % 2) ? 400 : 60},{ duration: 200, queue: false });
        
    }
})()); 
 
$('.background').click(function ()
{
    return $(this).is('.background')
    ?
        $(this).css('background', 'rgba(0,0,0, 0.9)').removeClass('background')
    :
        $(this).css('background', 'rgba(0,0,0, 0.4)').addClass('background')
    ;
});

    
$("#map-cover").on("click", function(){
    if($(this).text()=="OPEN THE MAP")
    {
        $(this).text("CLOSE THE MAP");
    } else {
        $(this).text("OPEN THE MAP");
    }
    $(".ISProductBody").toggle(); 

    return false;
});

.background {
    background: rgba(0,0,0, 0.9);
}
.background-alt {
    background: rgba(0,0,0, 0.4);
   
}

#map-cover {
  width: 100%;
  height: 400px;
  color: white;
  line-height: 400px;
  text-align: center;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background" id="map-cover">OPEN THE MAP</div>

Answer 1

从 var i = 1; 开始

JSFiddle Demo

编辑:请参阅 Barmar 的回答以获取解释，因为我无法比他做得更好。 :)