我是一个新的程序员,如果这个业余爱好者如此迷茫……我正在寻找一些方向,或者也许是一些想法.我这里的目标是让我学习,所以任何正确方向的推动都会得到应用.
好吧..我挑战自己使用jQuery为简单的注册表单创建一个类似控件的“向导”.我可以很好地完成这些步骤,但是我正在查看我的代码而且我不能帮助但是想一想; “必须有一种更好,更容易和更恰当的方式来做到这一点”.这就是我所拥有的.
function toggleStep(){
$("#nextButton").click(function(){
if($("#nextButton").name = "step1"){
$("#nextButton").attr("name","step2");
$("#backButton").attr("name","step1").css("display","inline");
$("#step1").hide();
$("#step2").show("fade",250);
}
$("#nextButton").click(function(){
if($("#nextButton").name = "step2"){
$("#nextButton").attr("name","step3");
$("#backButton").attr("name","step2");
$("#step2").hide();
$("#step3").show("fade",250);
}
$("#nextButton").click(function(){
if($("#nextButton").name = "step3"){
$("#nextButton").attr("name","step4");
$("#nextButton").css("display","none");
$("#backButton").attr("name","step3");
$("#step3").hide();
$("#step4").show("fade",250);
}
});
});
});
}
解决方法
我编辑了@Boaz代码,现在
you get干净了,我想这可以帮助你更好地理解.我还添加了一些评论.
jQuery代码变成了
$('#next,#prev').click(function(){
var t = $(this),current = $('#steps_container').find( '.step:visible' ),stepGo = ( t.attr( 'id' ) == 'next' ? current.next() : current.prev() );
if ( stepGo.length ) {
current.fadeOut( 'slow',function(){
stepGo.fadeIn( 'slow' );
});
};
return false;
});
