<分区>
有这样的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),所以我想要实现的是:当我点击确定时,这个 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)
});
}
警报有效(因此委托(delegate) i
为 1)但警报为 #step5
。
这让我很困惑,我认为 JS 为每个 div 输出 5 个函数...帮我解决这个问题。