javascript - 在简单的函数循环中设置 style.display 时的奇怪行为

Question

考虑以下 JavaScript：

function step(show)
{
    for(var i = 1; i <= 5; i++)
    {
        document.getElementById('step' + show).style.display = show == i ? 'block' : 'none';
    }
}

step(2);

结合此 HTML：

<div id="step1">1</div>
<div id="step2">2</div>
<div id="step3">3</div>
<div id="step4">4</div>
<div id="step5">5</div>

我希望只#step2显示，但我看到相反的结果：

1
3
4
5

这是一个JSFiddle。是什么导致了这种奇怪的行为，我该如何解决？

Answer 1

我想你想要：

document.getElementById('step' + i).style.display = show == i ? 'block' : 'none';

注意这里的变化------------^

演示：http: //jsfiddle.net/5DNjc/2/

如果没有更改，您总是id使用传入的参数（静态）修改元素。所以从技术上讲，你总是display根据最后一个元素是否通过条件来设置（目标元素的）。变化值为i。

对我来说，如果你将逻辑分开，它会更易读，并且可能会帮助你一开始就没有遇到问题:) 类似的东西：

function step(show) {
    for(var i = 1; i <= 5; i++) {
        var curDiv = document.getElementById('step' + i);
        var shouldBeShown = (i === show);
        var newDisplay = shouldBeShown ? 'block' : 'none';
        curDiv.style.display = newDisplay;
    }
}

演示：http: //jsfiddle.net/5DNjc/3/

Answer 2

document.getElementById('step' + i).style.display = show == i ? 'block' : 'none'; 

http://jsfiddle.net/3REbr/2/