次の 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;
}
}
document.getElementById('step' + i).style.display = show == i ? 'block' : 'none';