1

そのような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つの関数を出力すると思っていました...これを回避するのを手伝ってください。

4

2 に答える 2