考虑以下 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 .是什么导致了这种奇怪的行为,我该如何解决?
最佳答案
我想你想要:
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;
}
}
关于javascript - 在简单的函数循环中设置 style.display 时的奇怪行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16097649/