Jquery-Steps:如果您跳过了前一步,则返回将与无尾循环卡住
Jquery-Steps : going back stucks with end less loop, if you skipped a step before
我正在实现jquery-Step Advance Form
这里我需要跳过一步,如果年龄小于18,这是上面的一个类似的例子,当我试图实现同样的目标时,跳过一个步骤很好,但是一旦我需要回去点击上一个按钮,JS就会陷入无终点循环!!
这里我为相同的
创建了jsfiddle这是JS
$(function () {
$("#form-3").steps({
bodyTag: "fieldset",
headerTag: "h1",
onStepChanging: function (event, currentIndex, newIndex) {
if (currentIndex > newIndex) {
return true;
}
if (newIndex === 3 && Number($("#age").val()) < 18) {
return false;
}
var form = $(this);
if (currentIndex < newIndex) {
$("#form-3 .body:eq(" + newIndex + ") label.error", form).remove();
$("#form-3 .body:eq(" + newIndex + ") .error", form).removeClass("error");
}
return true;
},
onStepChanged: function (event, currentIndex, priorIndex) {
if (currentIndex === 2 && Number($("#age").val()) >= 18) {
$(this).steps("next");
}
if (currentIndex === 2 && priorIndex === 3) {
$(this).steps("previous");
}
},
onFinishing: function (event, currentIndex) {
return true;
},
onFinished: function (event, currentIndex) {
var form = $(this);
form.submit();
}
})
});
这里是HTML
<form id="form-3" action="#">
<h1 class="noDisplay">Account</h1>
<fieldset>
<legend>Account Information</legend>
<h3> Your Information</h3>
<ul>
<li>
<div><label for="userName">User name *</label></div>
<div><input id="userName" name="userName" type="text" class="required" data-msg-required="Username Required!"/></div>
<div class="cell"><div class="registerError"></div></div>
</li>
<li>
<div><label for="password">Password *</label></div>
<div><input id="password" name="password" type="text" class="required" data-msg-required="Password Required!"></div>
<div class="cell"><div class="registerError"></div></div>
</li>
<li>
<div><label for="confirm">Confirm Password *</label></div>
<div><input id="confirm" name="confirm" type="text" class="required" data-msg-required="Confirm Password Required!"></div>
<div class="cell"><div class="registerError"></div></div>
</li>
</ul>
<p>(*) Mandatory</p>
</fieldset>
<h1 class="noDisplay">Profile</h1>
<fieldset>
<legend>Profile Information</legend>
<h3> Your Information</h3>
<label for="name">First name *</label>
<input id="name" name="name" type="text" class="required">
<label for="surname">Last name *</label>
<input id="surname" name="surname" type="text" class="required">
<label for="email">Email *</label>
<input id="email" name="email" type="text" class="required email">
<label for="address">Address</label>
<input id="address" name="address" type="text">
<label for="age">Age (The warning step will show up if age is less than 18) *</label>
<input id="age" name="age" type="text" class="required number">
<p>(*) Mandatory</p>
</fieldset>
<h1 class="noDisplay">Warning</h1>
<fieldset>
<legend>You are to young</legend>
<h3> Your Information</h3>
<p>Please go away ;-)</p>
</fieldset>
<h1 class="noDisplay">Finish</h1>
<fieldset>
<legend>Terms and Conditions</legend>
<h3> Your Information</h3>
<input id="acceptTerms" name="acceptTerms" type="checkbox" class="required"> <label for="acceptTerms">I agree with the Terms and Conditions.</label>
</fieldset>
</form>
我已经观察到currentIndex和newIndex参数没有得到正确的值,但我不明白为什么?
在onStepChanged是两个语句在错误的顺序,所以我改变了它,到目前为止,它工作得很好。
我已经在博客文章中修复了它。但你可以在这里自己试试。
这是固定的JS代码
onStepChanged: function (event, currentIndex, priorIndex)
{
// Suppress (skip) "Warning" step if the user is old enough and wants to the previous step.
if (currentIndex === 2 && priorIndex === 3)
{
$(this).steps("previous");
return;
}
// Suppress (skip) "Warning" step if the user is old enough.
if (currentIndex === 2 && Number($("#age").val()) >= 18)
{
$(this).steps("next");
}
}
相关文章:
- Javascript返回值只在循环中返回一次
- 为什么要返回'这'在导致循环的JavaScript原型中
- 为循环嵌套的Javascript未按预期返回数组
- 使用for循环从Javascript中的函数返回多个值
- Foreach循环只返回最后一个值
- 用于循环随机返回的javascript
- 如何返回与 javascript 中循环的其余部分不同的第一个循环
- 如何使for循环等待回调返回值
- 虽然循环只返回最终结果
- 在for循环之后返回一个值
- 使用函数for循环遍历对象以更改值,然后返回结果
- 返回循环中调用的回调结果的串联
- 如何获取从循环返回的元素的索引
- 如果循环中至少有一个元素返回 false,如何将变量设置为 false
- Javascript返回循环和
- 使用Q.js按顺序返回循环的GET请求
- jQuery Deferred只返回循环中的最后一个值
- 返回循环getElementsByClassName不起作用
- 使用Javascript返回循环变量的值
- 全局变量只返回循环中最后一个实例的值