そのようなDOM構造があります:
<div class="info" id="step1">
<a href="#" id="next_step_1"> ok </a>
</div>
<div class="info" id="step2">
<a href="#" id="next_step_2"> ok </a>
</div>
<div class="info" id="step3">
<a href="#" id="next_step_3"> ok </a>
</div>
... (すぐ)
Div .info
にはdisplay:none
プロパティ (1 を除く) があるため、達成したいこと: [OK] をクリックすると、この div がフェードアウトし、次の div がフェードインします。
もちろん、各divに関数を書き込むのはDRYではないので、これを試しました:
for (var i=1; i<5; i++){
$("body").delegate('#next_step_'+i, 'click', function(){
$("#step"+i).fadeOut();
$("#step"+i+1).fadeIn();
});
}
このコードは機能しませんでした。
for (var i=1; i<5; i++){
$("body").delegate('#next_step_'+i, 'click', function(){
alert("#step"+i)
});
}
そしてアラートは機能しました(デリゲートi
は1でした)が、アラートは#step5
.
それは私を混乱させます、私はJSがdivごとに5つの関数を出力すると思っていました...これを回避するのを手伝ってください。