返回更新的变量时，Javascript多步形式不会更新函数外的变量值 [英] Javascript Multistep form won't update variable value outside of function when returning the updated variable
问题描述
我正在制作一个多步骤捐赠表单，使用javascript在步骤之间转换。遗憾的是，从函数返回值时，它不会更新该值。使用此函数完成更改步骤：
I'm working on a multi-step donation form which transitions between steps by using javascript. Sadly, when returning the value from the function, it is not updating the value. Changing step is done using this function:
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 变量的值。当使用此函数单击下一步按钮时，将调用此函数：
I have added return currentStep at the bottom to try to update the value of the currentStep variable that was passed in. This function is being called when the "Next" button is clicked using this function:
//change steps
$(".nextStep").click(function () {
if (validateCurrentStep(currentStep)) {
currentStep = showNextStep(currentStep);
} else {
return false;
}
});
遗憾的是，这并没有更新变量。可以在此处找到使用firebug等进行简单测试的页面在线版本。
Sadly though this is not updating the variable. An online version of the page for easier testing using firebug, etc. can be found here.
主页的完整版可以在这里找到：
http：// pastebin .com / TtTZCf06
Full version of the main page can be found here: http://pastebin.com/TtTZCf06
正在使用的完整版javascript可以在这里找到：
http://pastebin.com/KgLJGUSA
Full version of the javascript being used can be found here: http://pastebin.com/KgLJGUSA
提前感谢大家的时间和帮助。
Thank you all in advance for your time and assistance.
我正在使用
- Twitter Bootstrap
- jQuery 1.8.2
- PHP 5
更新：移动返回currentStep; 后发生 $（＃stepcurrentStep）.slideToggle（slow）'发生了，它将转到第2步，但不允许我继续前进到第3步或返回第1步。
UPDATE: when moving return currentStep; to occur after the $("#step" currentStep).slideToggle("slow")''s that occur, it will pass to step 2, but won't allow me to then move forward to step 3 or return to step 1.
UPD ATE 2 ：当它移动到之后如果 else 部分，但仍然在回调中，它没有正确更新，也不会让我前进或后退＃step2
UPDATE 2: when moving it to after the if else section, but still inside the callback, it is not updating correctly and also won't let me go forward or backwards from #step2
* 更新3：* 删除回调似乎有效：
*UPDATE 3: * Removing the callback seems to work:
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;
}
});
这篇关于返回更新的变量时，Javascript多步形式不会更新函数外的变量值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
