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，但我会看到相反的结果：

这是JSFiddle。造成这种奇怪行为的原因是什么？如何解决？

Answer 1

我想你想要：

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

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

DEMO： 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;
    }
}

DEMO： http://jsfiddle.net/5DNjc/3/

Answer 2

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

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

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

2 个答案: