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/