Javascript jquery函数在第一次单击时不起作用

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

我这里有4个脚本：

第一个在400px和60px之间切换div高度， 第二个选项切换行高，使文本随div高度移动， 第三次切换文本， 第四个切换背景

在我的计算机上，它在第二次单击时正常工作。第一次点击没有任何作用

在fiddle上，您可以看到它在第一次单击时切换文本，然后退出

$（“#地图封面”）。单击（（函数（）{
var i=0；
返回函数（）{
$（this.animate（{height:（++i%2）？400:60}，{duration:200，queue:false}）；
}
})());
$（“#地图封面”）。单击（（函数（）{
var i=0；
返回函数（）{
$（this.animate（{lineHeight:（++i%2）？400:60}，{duration:200，queue:false}）；
}
})()); 
$（'.background'）。单击（函数（）
{
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'））
;
});
$（“#地图封面”）。在（“单击”，函数（）{
if（$（this）.text（）=“打开地图”）
{
$（此）.text（“关闭地图”）；
}否则{
$（此）.text（“打开地图”）；
}
$（“.ISProductBody”）.toggle（）；
返回false；
});
.background{
背景：rgba（0,0,0,0.9）；
}
.背景alt{
背景：rgba（0,0,0,0.4）；
}
#地图封面{
宽度：100%；
高度：400px；
颜色：白色；
线高：400px；
文本对齐：居中；
}

打开地图
从变量i=1开始


编辑：有关解释，请参见巴尔马的答案，因为我无法比他做得更好。：）
 第一次单击是将
高度
和
线宽
设置为CSS中的相同值。
i
的初始值为
0
。
++i
的值是
1
，
1%2
是
1
，这是真实的，所以第一次单击
的值（++i%2）？400:60是
400

只需更改其中值的顺序，或使用
i++
而不是
++i


$（“#地图封面”）。单击（（函数（）{
var i=0；
返回函数（）{
$（此）。设置动画({
高度：（i++%2）？400:60
}, {
持续时间：200，
队列：false
});
}
})());
$（“#地图封面”）。单击（（函数（）{
var i=0；
返回函数（）{
$（此）。设置动画({
线宽：（i++%2）？400:60
}, {
持续时间：200，
队列：false
});
}
})());
$（'.background'）。单击（函数（）{
返回$（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'）；
});
$（“#地图封面”）。在（“单击”，函数（）{
if（$（this）.text（）=“打开地图”）{
$（此）.text（“关闭地图”）；
}否则{
$（此）.text（“打开地图”）；
}
$（“.ISProductBody”）.toggle（）；
返回false；
});
.background{
背景：rgba（0,0,0,0.9）；
}
.背景alt{
背景：rgba（0,0,0,0.4）；
}
#地图封面{
宽度：100%；
高度：400px；
颜色：白色；
线高：400px；
文本对齐：居中；
}

打开地图
我简化了您的代码并纠正了一系列问题（主要与可读性和可维护性有关）

但是问题归结到如何检查
（++i%2）
的值，在那里需要与
（++i%2==0）
进行比较

但是，当您将要检查递增的
i
的值两次时，最好分别递增比较值，然后将
i%2
的值与
0
进行比较


var打开，i=0；
$（“#地图封面”）。单击（函数（）{
var self=$（这是）；
如果（！打开）{
开放=真实；
self.addClass（'background'）；
self.text（“关闭地图”）；
}否则{
开=假；
self.removeClass（'background'）；
self.text（“打开地图”）；
}
$（此）。设置动画(
{ 
‘高度’：（！（i%2==0）？400:60），
“行高”：（！（i%2==0）？400:60）
},
{ 
持续时间：200，
队列：false
}
);
$（“.ISProductBody”）.toggle（）；
i++；
});
#地图封面{
背景：rgba（0,0,0,0.9）；
宽度：100%；
高度：400px；
颜色：白色；
线高：400px；
文本对齐：居中；
}
#地图封面背景{
背景：rgba（0,0,0,0.4）；
}

打开地图