Javascript 表格中带有步骤答案的进度条

当我点击调查中的“下一步”按钮时，我尝试使我的进度条步调一致。 但我想我在实际代码中遗漏了一些东西。 我的调查由滑块组成，滑块在单击按钮后的输出中验证答案。 如果能帮上忙就太好了，谢谢

这是我的html：

|



|



提交

这是我的JS

$（文档）.ready（函数（）{
无功电流=1；
小部件=$（“.step”）；
btnnext=$（“.myBtnRight”）；
//btnback=$（“.back”）；
btnsubmit=$（“.submit”）；
//初始化按钮和用户界面
widget.not（':eq（0）'）.hide（）；
隐藏按钮（当前）；
设定进度（当前）；
//下一步按钮单击操作
btnnext.单击（函数（）{
if（当前<小部件长度）{
//检查验证
if（$（“.form”）.valid（）{
widget.show（）；
widget.not（':eq（'+（当前++）+'））.hide（）；
设定进度（当前）；
}
}
隐藏按钮（当前）；
})
/*
//后退按钮单击操作
btnback.click（函数（）{
如果（当前>1）{
电流=电流-2；
if（当前<小部件长度）{
widget.show（）；
widget.not（':eq（'+（当前++）+'））.hide（）；
设定进度（当前）；
}
}
隐藏按钮（当前）；
})
*/
//提交按钮点击
btnsubmit.click（函数（）{
警报（“点击提交按钮”）；
});
$（'.form'）.validate（{//初始化插件
忽略：“：不（：可见）”，
规则：{
名称：“必需”
},
});
});
//更改进度条操作
setProgress=函数（currstep）{
var percent=parseFloat（100/widget.length）*currstep；
百分比=固定的百分比（）；
$（“.progress bar”）.css（“宽度”，百分比+“%”）.html（百分比+“%”）；
}
//根据当前步骤隐藏按钮
hideButtons=功能（当前）{
var limit=parseInt（widget.length）；
$（“.action”）.hide（）；
如果（电流<限制）btnnext.show（）；
如果（当前>1）btnback.show（）；
如果（当前==限制）{
btnnext.hide（）；
btnsubmit.show（）；
}
}

<form  class="form" name="frm" method="post" action="quest_A_rec.asp" onKeydown="testClavier();" >
          <input name="ID" value="<%=Data_Questions("ID_Resultat")%>" type="hidden">
          <div class="col-sm-12">
            <div class="row col-sm-offset-2">
              <div class="col-sm-8 cent" id="question">
                <div class="left">
                  <p class="requestBig"><%=Data_Questions("LibQuestion")%></p>
                </div>
                <output><%=initOutput%></output>
              </div>
            </div>
          </div>
          <div class="mySlider">
            <div class="row col-sm-offset-2">
              <div class="col-sm-8 cent">
                <div class="col-sm-3" id="jamais">
                  <p><%=session("LibLow")%><br />
                    |</p>
                </div>
              </div>
            </div>
            <div class="row col-sm-offset-2">
              <div class="col-sm-8 cent">
                <input type="range" value="<%=valBornes("valMin")-1%>" step="1" min="<%=valBornes("valMin")%>" max="<%=valBornes("valMax")%>">
                <br />
              </div>
            </div>
            <div class="row col-sm-offset-2">
              <div class="col-sm-8 cent">
                <div class="col-sm-3" id="toujours">
                  <p>|<br />
                    <%=libBornes("libHigh")%></p>
                </div>
              </div>
            </div>
          </div>
        </form>
        <div class="row">
          <div class="col-sm-4 col-sm-offset-2">
            <p class="avancement"><%=GetTexteFBA("avancement")%></p>
          </div>
          <div class="col-sm-5">
       <div class="progress">


<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
</div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-12 boutons">
                <div class="col-sm-6 col-sm-push-6">
                <button type="button" class="btn myBtnRight" href="<%=urlNext%>" onClick="document.frm.submit();" id="btnNext"><%=GetTexteFBA("btn_valider")%><span class="iconInsideButtonRight icon-chevron-right"></span></button>
                <button type="button" class="action submit btn myBtnRight">Submit</button>
                </div>
                <div class="col-sm-6 col-sm-pull-6">
                <button type="button" class="btn myBtnnobs" href="#"  role="button" onClick="document.frm_nobs.submit();"><%=GetTexteFBA("btn_nobs")%></button>

    $(document).ready(function(){
    var current = 1;

    widget      = $(".step");
    btnnext     = $(".myBtnRight");
    //btnback     = $(".back"); 
    btnsubmit   = $(".submit");

    // Init buttons and UI
    widget.not(':eq(0)').hide();
    hideButtons(current);
    setProgress(current);

    // Next button click action
    btnnext.click(function(){
        if(current < widget.length){
            // Check validation
            if($(".form").valid()){
                widget.show();
                widget.not(':eq('+(current++)+')').hide();
                setProgress(current);
            }
        }
        hideButtons(current);
    })
    /*
    // Back button click action
    btnback.click(function(){
        if(current > 1){
            current = current - 2;
            if(current < widget.length){
                widget.show();
                widget.not(':eq('+(current++)+')').hide();
                setProgress(current);
            }
        }
        hideButtons(current);
    })
    */
    // Submit button click
    btnsubmit.click(function(){
        alert("Submit button clicked");
    });

    $('.form').validate({ // initialize plugin
        ignore:":not(:visible)",            
        rules: {
            name : "required"
        },
    });

});

// Change progress bar action
setProgress = function(currstep){
    var percent = parseFloat(100 / widget.length) * currstep;
    percent = percent.toFixed();
    $(".progress-bar").css("width",percent+"%").html(percent+"%");      
}

// Hide buttons according to the current step
hideButtons = function(current){
    var limit = parseInt(widget.length); 

    $(".action").hide();

    if(current < limit) btnnext.show();
    if(current > 1) btnback.show();
    if (current == limit) { 
        btnnext.hide(); 
        btnsubmit.show();
    }
}