Javascript 简单for循环会产生奇怪的结果

当我点击h2时，我试图用它的数组索引更新每个按钮的html

我尝试使用for循环，但它并不是只更新每个按钮#1、3，而是2和4保持不变。我做错了什么？谢谢

演示：

HTML

<div class='container text-center'>
    <h2>Click me to toggle the button</h2>
    <button type='submit' class='btn btn-primary btn-large'>Test</button>
    <button type='submit' class='btn btn-danger btn-large'>Test</button>
    <button type='submit' class='btn btn-success btn-large'>Test</button>
    <button type='submit' class='btn btn-info btn-large'>Test</button>
</div>

单击我来切换按钮
试验
试验
试验
试验

JS

<script>
var buttons = [
    $("button:eq(0)"), 
    $("button:eq(1)"), 
    $("button:eq(2)"), 
    $("button:eq(3)")
];

$("h2").click(function(){
    for(i = 0; i < 3; i++) {
        buttons[i].text("Array element: " + i++);
    }
});
</script>

变量按钮=[
$（“按钮：等式（0）”），
$（“按钮：等式（1）”），
$（“按钮：等式（2）”），
$（“按钮：等式（3）”）
];
$（“h2”）。单击（函数（）{
对于（i=0；i<3；i++）{
按钮[i]。文本（“数组元素：+i++”）；
}
});
< /代码> 这是因为您在循环的
中递增。
buttons[i].text("Array element: " + i++);

换成

buttons[i].text("Array element: " + i);

buttons[i].text("Array element: " + i);

因为循环中有
i++

buttons[i].text("Array element: " + i++);

成功

var按钮=[
$（“按钮：等式（0）”），
$（“按钮：等式（1）”），
$（“按钮：等式（2）”），
$（“按钮：等式（3）”）
];
$（“h2”）。单击（函数（）{
对于（i=0；i<4；i++）{//这里
按钮[i].text（“数组元素：”+（i+1））；//和这里
}
});
用于（i=0；i<3；i++）{
按钮[i]。文本（“数组元素：+i++”）；
}

换成

 for(i = 0; i < 4; i++) {
    buttons[i].text("Array element: " + i);
}

（i=0；i<4；i++）的
{
按钮[i]。文本（“数组元素：+i”）；
}

请注意，您犯了两个错误，一个是仅循环3个元素，另一个是将i增加两次
 （i=0；i<3；）的
{
for(i = 0; i < 3;) {
    buttons[i].text("Array element: " + i++);
}

按钮[i]。文本（“数组元素：+i++”）；
}

如果要在循环中递增，请删除for语句中的第三个声明。否则将增加两次。
尝试使用
 for(i = 0; i < 4; i++) {
    buttons[i].text("Array element: " + i);
}

for(i = 0; i < 3;) {
    buttons[i].text("Array element: " + i++);
}