JavaScript多步表单won't更新函数外的变量值时,返回已更新的变量
JavaScript Multistep form won't update variable value outside of function when returning the updated variable
我正在制作一个多步骤捐赠表单,通过使用JavaScript在步骤之间进行转换。遗憾的是,当从函数返回值时,它没有更新值。使用以下函数更改步骤:
function showNextStep(currentStep) {
var chosenDonationType, checkedAllocations, selectedAllocationValue;
$("#step" + currentStep).slideToggle("slow", function () {
if (currentStep === 1) {
//figure out what kind of donation they are making
chosenDonationType = $("[name=donationType]").val();
//show the apppropriate slide
switch (chosenDonationType) {
case "oneTimeGift":
currentStep += 1;
$("#makingAOneTimeGift").show();
$("#step" + currentStep).slideToggle("slow");
break;
case "recurringDonation":
currentStep += 1;
$("#makingARecurringGift").show();
$("#step" + currentStep).slideToggle("slow");
break;
//if somehow they changed it to something else, ignore them and return false.
default:
return false;
//break; not needed due to return
}//end switch
} else if (currentStep === 3) {
checkedAllocations = $("#step3 :checkbox:checked");
if (checkedAllocations.length === 1) {
selectedAllocationValue = checkedAllocations.val();//do whatever you want with that
$("[name=" + selectedAllocationValue + "-Allocation]").val(100);
currentStep += 2;
} else {
currentStep += 1;
}
$("#step" + currentStep).slideToggle("slow");
} else {
currentStep += 1;
$("#step" + currentStep).slideToggle("slow");
}
});
return currentStep;
}
我在底部添加了return currentStep
,以尝试更新传入的currentStep
变量的值。当使用以下函数单击下一个按钮时,将调用此函数:
//change steps
$(".nextStep").click(function () {
if (validateCurrentStep(currentStep)) {
currentStep = showNextStep(currentStep);
} else {
return false;
}
});
遗憾的是,这并没有更新变量。可以在这里找到该页面的在线版本,以便更轻松地使用firebug等进行测试。
主页的完整版本可以在这里找到:http://pastebin.com/TtTZCf06
使用的JavaScript的完整版本可以在这里找到:http://pastebin.com/KgLJGUSA
我使用
- Twitter引导jQuery 1.8.2 PHP 5
更新:当移动return currentStep;
发生在$("#step" currentStep).slideToggle("slow")'
发生之后时,它将传递到步骤2,但不允许我向前移动到步骤3或返回到步骤1。
UPDATE 2:当将其移动到if
else
部分之后,但仍在回调中,它没有正确更新,也不会让我从#step2
向前或向后移动
**UPDATE 3: **删除回调似乎有效:
function showNextStep(currentStep) {
var chosenDonationType, checkedAllocations, selectedAllocationValue, stepsMoved = 1;
$("#step" + currentStep).slideToggle("slow")
if (currentStep === 1) {
//figure out what kind of donation they are making
chosenDonationType = $("[name=donationType]").val();
//show the apppropriate slide
switch (chosenDonationType) {
case "oneTimeGift":
currentStep += 1;
$("#makingAOneTimeGift").show();
$("#step" + currentStep).slideToggle("slow");
break;
case "recurringDonation":
currentStep += 1;
$("#makingARecurringGift").show();
$("#step" + currentStep).slideToggle("slow");
break;
//if somehow they changed it to something else, ignore them and return false.
default:
stepsMoved = 0;
return false;
//break; not needed due to return
}//end switch
} else if (currentStep === 3) {
checkedAllocations = $("#step3 :checkbox:checked");
if (checkedAllocations.length === 1) {
selectedAllocationValue = checkedAllocations.val();//do whatever you want with that
$("[name=" + selectedAllocationValue + "-Allocation]").val(100);
currentStep += 2;
stepsMoved = 2;
} else {
currentStep += 1;
}
$("#step" + currentStep).slideToggle("slow");
} else {
currentStep += 1;
$("#step" + currentStep).slideToggle("slow");
}
return stepsMoved;
}
修正:
function showNextStep(currentStep) {
var chosenDonationType, checkedAllocations, selectedAllocationValue, stepsMoved = 1;
$("#step" + currentStep).slideToggle("slow")
if (currentStep === 1) {
//figure out what kind of donation they are making
chosenDonationType = $("[name=donationType]").val();
//show the apppropriate slide
switch (chosenDonationType) {
case "oneTimeGift":
currentStep += 1;
$("#makingAOneTimeGift").show();
$("#step" + currentStep).slideToggle("slow");
break;
case "recurringDonation":
currentStep += 1;
$("#makingARecurringGift").show();
$("#step" + currentStep).slideToggle("slow");
break;
//if somehow they changed it to something else, ignore them and return false.
default:
stepsMoved = 0;
return false;
//break; not needed due to return
}//end switch
} else if (currentStep === 3) {
checkedAllocations = $("#step3 :checkbox:checked");
if (checkedAllocations.length === 1) {
selectedAllocationValue = checkedAllocations.val();//do whatever you want with that
$("[name=" + selectedAllocationValue + "-Allocation]").val(100);
currentStep += 2;
stepsMoved = 2;
} else {
currentStep += 1;
}
$("#step" + currentStep).slideToggle("slow");
} else {
currentStep += 1;
$("#step" + currentStep).slideToggle("slow");
}
return stepsMoved;
}
,触发器为:
$(".nextStep").click(function () {
if (validateCurrentStep(currentStep)) {
stepsMovedForward = showNextStep(currentStep);
currentStep += stepsMovedForward;
} else {
return false;
}
});
相关文章:
- 替换另一个变量对象中的变量值
- 如何将变量值附加到另一个变量
- 将变量值指定为变量名称
- GAS:在处理程序函数中使用变量时,如何更改全局变量值并保留其更改后的值
- jquery没有't从DIV数据id中获取PHP变量值,只输出变量名
- 将视图中的JavaScript变量值分配给控制器变量
- 如何将JavaScript变量值转换为PHP变量
- 如何从HTML元素或Javascript变量中设置idoc变量值
- console.log() 在变量值实际更改之前显示变量的更改值
- 如何在名称中使用其他变量值创建 javascript 变量
- JavaScript变量值是否可以存储在PHP变量中
- 使用变量名称字符串 - JavaScript 访问变量值
- 通过 Ajax 获取 PHP 变量值,变量名称作为参数
- 当更改复制变量的值时,它也在更改 AngularJS 中的主变量值
- Jquery/Javascript - 变量正在接受另一个变量值
- 获取 PHP 变量中的 JavaScript 变量值
- 如何将 javascript 变量值分配给 php 变量
- 如何将javascript变量值传递给php变量
- 如何通过javascript变量设置JSTL变量值
- 在函数中使用变量值作为变量名