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

Posted 2023-05-09

【中文标题】使用 jquery 的动态“下一个”和“上一个”步骤

【英文标题】：Dynamic "next" and "previous" step with jquery

【发布时间】：2017-03-10 05:08:48

【问题描述】：

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

$(".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"))

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

谢谢

【问题讨论】：

请发布您正在使用的html。这有助于我们提供完美的解决方案

html 代码是一个带有一些 fieldset 标签的表单。每个字段集都有一个 id 女巫是 pages 数组。使用 css 所有字段集都设置为 display:none 除了 id="one"

如果有人为您工作，请不要忘记接受答案...如果您不这样做，您会发现人们越来越不可能提供帮助:)

【参考方案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);
    
);

【参考方案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();
);

【参考方案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>

【讨论】：

很抱歉。我已经更新了我的答案，请检查代码 sn-p 中的输出。

我已经使用“以前的”类而不是 id 修改了我的 html 并且它有效。谢谢！

【参考方案4】：

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

我会使用数字约定来命名不同的表单部分，例如“#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(); 
);