使用 jquery 的动态“下一个”和“上一个”步骤

Question

在多步骤表单中，我使用下面的代码转到表单的下一部分或上一部分（只有一个步骤可见，其他步骤隐藏）：

$(".next").click(function(){
   if (form.valid() === true){
        if ($('#one').is(":visible")){
            current_fs = $('#one');
            next_fs = $('#two');
        }else if($('#two').is(":visible")){
            current_fs = $('#two');
            next_fs = $('#three');
        }

   next_fs.show(); 
   current_fs.hide();
   }
 });

 $('#previous').click(function(){
    if($('#two').is(":visible")){
        current_fs = $('#two');
        next_fs = $('#one');
    }else if ($('#three').is(":visible")){
        current_fs = $('#three');
        next_fs = $('#two');
    }
    next_fs.show(); 
    current_fs.hide();
 });

如果我有一个 3 步表单，此代码运行良好，但我想使用数组修改我的代码以转到下一步或上一步。

我尝试使用像 var pages = ["#one","#two","#three"] 这样的数组并使用，例如 if ($(pages[0]).is(":visible")) 而不是 if ($('#one').is(":visible"))

如何修改此代码以使其可扩展（例如，如果我想添加更多页面）

谢谢

Answer 1

您不需要任何数组来存储您的步骤。最好基于您的 HTML 和 CSS。看看我的解决方案：JSFiddle

因此，当您添加新步骤时，您根本不需要修改 JavaScript。只需在您的 HTML 中添加新步骤：

<div class="step active">
    1
</div>
<div class="step">
    2
</div>
<div class="step">
    3
</div>
<div class="step">
    4
</div>

<button id="prev" disabled="disabled">Prev</button>
<button id="next">Next</button>

使用 CSS 隐藏除活动之外的所有步骤：

.step {
  display: none;
}

.step.active {
  display: block;
}

在我的例子中是 JavaScript：

var index = $(".step.active").index(".step"),
    stepsCount = $(".step").length,
    prevBtn = $("#prev"),
    nextBtn = $("#next");

prevBtn.click(function() {
    nextBtn.prop("disabled", false);

    if (index > 0) {
        index--;
        $(".step").removeClass("active").eq(index).addClass("active");
    };

    if (index === 0) {
        $(this).prop("disabled", true);
    }
});

nextBtn.click(function() {
    prevBtn.prop("disabled", false);

    if (index < stepsCount - 1) {
        index++;
        $(".step").removeClass("active").eq(index).addClass("active");
    };

    if (index === stepsCount - 1) {
        $(this).prop("disabled", true);
    }
});

Answer 2

这应该可以，我会添加一些错误处理，以防您的 pages 数组中不存在下一个或上一个索引。

$('#next').click(function(){
    if(form.valid() === true){
        var current_page = $(pages.join(",")).find(':visible');
        var current_index = pages.indexOf('#'+current_page.attr('id');
        current_page.hide();
        $(pages[current_index+1]).show();
    }
});
$('#previous').click(function(){
    var current_page = $(pages.join(",")).find(':visible');
    var current_index = pages.indexOf('#'+current_page.attr('id');
    current_page.hide();
    $(pages[current_index-1]).show();
});

Answer 3

我已经更新了我的代码，请检查一下。这是工作。我对 jquery 代码做了一些更改。请使用它。

   var form = $("#form");
         var pages = ["#one","#two","#three","#four","#five"];
         $(".next").click(function(){
            if (form.valid() === true){ 
         	   var temp = 0;
         	   var nextElementFound = false;
         	   pages.forEach(function(element) { 
         			temp++;
                     if ($(element).is(":visible")){ 
         		        current_fs =$(element);
         				if(pages.length > temp){
         				next_fs =$(pages[temp]);
         				nextElementFound = true;
         				}
         			}
                 }); 
         		if(nextElementFound){
                 next_fs.show(); 
                 current_fs.hide();
         		}
            }
          });
         
          $('#previous').click(function(){
             var temp = 0;
         	var previousElementFound = false;
         	pages.forEach(function(element) { 
         			 if ($(element).is(":visible")){ 
         		        current_fs =$(element);
         				if(temp != 0){
         				previousElementFound= true;
         				next_fs =$(pages[temp-1]);
         				}
         			}
             temp++;
             }); 
         	if(previousElementFound){
             next_fs.show(); 
             current_fs.hide();
         	}
          });

 #previous {
      border: 1px solid;
      float: left;
      margin-right: 10px;
      margin-top: 10px;
      padding: 10px;
      }
      .next {
      border: 1px solid;
      float: left;
      margin-left: 10px;
      margin-top: 10px;
      min-width: 50px;
      padding: 10px;
      text-align: center;
      }
      .customElement {
      background-color: gray;
      border: 1px solid;
      color: white;
      font-size: 35px;
      min-height: 30px;
      padding: 10px;
      text-align: center;
      width: 148px;
      }

<script
         src="https://code.jquery.com/jquery-3.1.1.js"
         integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
         crossorigin="anonymous"></script>
      <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
      <div>
         <form id="form">
            <div id ="one" class="customElement">
               one
            </div>
            <div id ="two" style="display:none" class="customElement">
               two
            </div>
            <div id ="three" style="display:none" class="customElement">
               three
            </div>
			<div id ="four" style="display:none" class="customElement">
               four
            </div>
			<div id ="five" style="display:none" class="customElement">
               five
            </div>
         </form>
         <div  id="previous" >
            Previous
         </div>
         <div class="next">
            Next
         </div>
      </div>

Answer 4

1. 我不会检查 ('#x') 是否可见，而是在活动页面中保留一个变量。

2. 我会使用数字约定来命名不同的表单部分，例如“#form-part-1”而不是“#one”。

最后我会这样做

$(".next").click(function(){
   $("#form-part-"+activeIndex).hide();
   activeIndex++;
   $("#form-part-"+activeIndex).show(); 
});

$(".prev").click(function(){
   $("#form-part-"+activeIndex).hide();
   activeIndex--;
   $("#form-part-"+activeIndex).show(); 
});