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

时间:2013-10-27 17:46:38

标签: javascript jquery html

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

我尝试使用for循环,但它不是仅更新每个按钮#1,3,但2和4保持不变。我究竟做错了什么?感谢

演示:http://jsfiddle.net/BVmUL/96/

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>

5 个答案:

答案 0 :(得分:3)

那是因为你在循环中间递增

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

将其更改为

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

答案 1 :(得分:2)

因为你在循环中有i++

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

制作

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

答案 2 :(得分:2)

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

$("h2").click(function(){
    for(i = 0; i < 4; i++) { // here
        buttons[i].text("Array element: " + (i + 1)); // and here
    }
});

答案 3 :(得分:1)

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

如果要在循环中递增,请删除for语句中的第三个声明。否则你将增加两次。

答案 4 :(得分:0)

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

将其更改为

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

请注意,你犯了两个错误,一个是仅循环3个元素而另一个是递增两次。