多步骤表单，带有使用jQuery和CSS3的进度条，输入不在DIV中工作

我下载了相同的“使用jQuery和CSS3的带有进度条的多步骤表单”

我能够用div显示更多表单或图像中的字段集，因此在字段集中显示内容不是问题。它是实际的按钮，下一个按钮除非在div之外否则不起作用

这是一个问题，因为下一个字段集上的按钮（以及上一个按钮）需要放置在div中（用于样式设置）

所以，在进行下一步的过程中

<fieldset>
<h2 class="fs-title">Create your account</h2>
<h3 class="fs-subtitle">This is step 1</h3>
<input type="text" name="email" placeholder="Email" />
<button type="button" class="next action-button btn btn-primary">
  Next Step</span>
</button>   

使用jQuery和CSS3的带有进度条的多步骤表单

帐户设置
社会概况
个人资料

创建您的帐户
这是第一步
下一步工作

下一步不起作用
社会概况
你在社交网络上的存在
以前的不起作用
下一步不起作用
个人资料
我们永远不会卖掉它

当您单击“下一步”按钮以当前

字段集为目标时，jquery正在使用
$.parent（）
，而单击
$.parent（）.next（）
以下一个
字段集为目标时。当您将“下一步”按钮包装在
div
中时，该
div
现在是父级，而不是
字段集。只需更改
current\u fs
和
next\u fs
即可找到
$最近的（'fieldset'）
，而不是使用
$.parent（）


//jQuery时间
var当前值、下一个值、上一个值//字段集
变量左，不透明度，比例//我们将设置动画的字段集属性
var动画//防止快速多点单击故障的标志
$（“.next”）。单击（函数（）{
如果（动画）返回false；
动画=真；
当前的_fs=$（this）.closest（'fieldset'）；
next_fs=当前_fs.next（）；
//使用next_fs的索引在progressbar上激活下一步
$（“#progressbar li”）.eq（$（“字段集”）.index（next_fs））.addClass（“活动”）；
//显示下一个字段集
next_fs.show（）；
//使用样式隐藏当前字段集
当前动画（{opacity:0}{
步骤：函数（现在是mx）{
//随着当前_fs的不透明度降低到0-存储在“now”中
//1.将电流放大至80%
比例=1-（1-现在）*0.2；
//2.从右侧带下一个_fs（50%）
左=（现在是*50）+“%”；
//3.当下一个_fs移入时，将其不透明度增加到1
不透明度=1-现在；
当前_fs.css({
“转换”：“缩放（“+scale+”），
“位置”：“绝对”
});
css（{'left'：left'opacity'：opacity}）；
}, 
持续时间：800，
完成：函数（）{
当前_fs.hide（）；
动画=假；
}, 
//这来自自定义的放松插件
放松：“轻松返回”
});
});
$（“.previous”）。单击（函数（）{
如果（动画）返回false；
动画=真；
当前_fs=$（this.parent（）；
previous_fs=$（this.parent（）.prev（）；
//取消激活progressbar上的当前步进
$（“#progressbar li”）.eq（$（“字段集”）.index（当前#fs））.removeClass（“活动”）；
//显示上一个字段集
先前的_fs.show（）；
//使用样式隐藏当前字段集
当前动画（{opacity:0}{
步骤：函数（现在是mx）{
//随着当前_fs的不透明度降低到0-存储在“now”中
//1.将以前的_fs从80%扩展到100%
比例=0.8+（1-现在）*0.2；
//2.将当前_fs向右移动（50%）-从0%
左=（（1-现在）*50）+“%”；
//3.移动前一个_fs时，将其不透明度增加为1
不透明度=1-现在；
当前的_fs.css（{'left'：left}）；
以前的{'transform'：'scale（'+scale+'），'opacity'：opacity}）；
}, 
持续时间：800，
完成：函数（）{
当前_fs.hide（）；
动画=假；
}, 
//这来自自定义的放松插件
放松：“轻松返回”
});
});
$（“.submit”）。单击（函数（）{
返回false；
})
jQuery.easing.jswing=jQuery.easing.swing；扩展（jQuery.easing，{def:“easeOutQuad”，swing:function（e，f，a，h，g）{return jQuery.easing[jQuery.easing.def]（e，f，a，h，g）}，easeOutQuad:function（e，f，a，h，h，g）{return-h*（f，a，h，g）*（f-2 a}，easeOutQuad:function（e，f，a，a，h，h，h，g）{if（=2）
当您单击“下一步”按钮以当前
字段集和
$.parent（）.next（）为目标时，jquery正在使用
$.parent（）
指向下一个
字段集
。当您将“下一步”按钮包装在
div
中时，
div
现在是父项，而不是
字段集
。只需更改
当前
和
下一个
即可找到
$最近的（'fieldset'）
，而不是使用
$.parent（）


//jQuery时间
var current\u fs，next\u fs，previous\u fs；//字段集
var left，opacity，scale；//我们将设置动画的字段集属性
var animating；//防止快速多点单击故障的标志
$（“.next”）。单击（函数（）{
如果（动画）返回false；
动画=真；
当前的_fs=$（this）.closest（'fieldset'）；
next_fs=当前_fs.next（）；
//使用next_fs的索引在progressbar上激活下一步
$（“#progressbar li”）.eq（$（“字段集”）.index（next_fs））.addClass（“活动”）；
//显示下一个字段集
next_fs.show（）；
//使用样式隐藏当前字段集
当前动画（{opacity:0}{
步骤：函数（现在是mx）{
//随着当前_fs的不透明度降低到0-存储在“now”中
//1.将电流放大至80%
比例=1-（1-现在）*0.2；
//2.从右侧带下一个_fs（50%）
左=（现在是*50）+“%”；
//3.当下一个_fs移入时，将其不透明度增加到1
不透明度=1-现在；
当前_fs.css({
“转换”：“缩放（“+scale+”），
“位置”：“绝对”
});
下一个_fs.css（{'left'：l）
<fieldset>
<h2 class="fs-title">Create your account</h2>
<h3 class="fs-subtitle">This is step 1</h3>
<input type="text" name="email" placeholder="Email" />
<div class="pull-right">
  <button type="button" class="next action-button btn btn-primary">
      Next Step
  </button>                  
</div>

//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).closest('fieldset');
    next_fs = current_fs.next();

    //activate next step on progressbar using the index of next_fs
    $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

    //show the next fieldset
    next_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale current_fs down to 80%
            scale = 1 - (1 - now) * 0.2;
            //2. bring next_fs from the right(50%)
            left = (now * 50)+"%";
            //3. increase opacity of next_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({
        'transform': 'scale('+scale+')',
        'position': 'absolute'
      });
            next_fs.css({'left': left, 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

$(".previous").click(function(){
    if(animating) return false;
    animating = true;

    current_fs = $(this).closest('fieldset');
    previous_fs = current_fs.prev();

    //de-activate current step on progressbar
    $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

    //show the previous fieldset
    previous_fs.show(); 
    //hide the current fieldset with style
    current_fs.animate({opacity: 0}, {
        step: function(now, mx) {
            //as the opacity of current_fs reduces to 0 - stored in "now"
            //1. scale previous_fs from 80% to 100%
            scale = 0.8 + (1 - now) * 0.2;
            //2. take current_fs to the right(50%) - from 0%
            left = ((1-now) * 50)+"%";
            //3. increase opacity of previous_fs to 1 as it moves in
            opacity = 1 - now;
            current_fs.css({'left': left});
            previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
        }, 
        duration: 800, 
        complete: function(){
            current_fs.hide();
            animating = false;
        }, 
        //this comes from the custom easing plugin
        easing: 'easeInOutBack'
    });
});

$(".submit").click(function(){
    return false;
})