JavaScript多步表单won't更新函数外的变量值时,返回已更新的变量

JavaScript Multistep form won't update variable value outside of function when returning the updated variable

本文关键字:变量值 变量 已更新 返回 函数 更新 表单 won JavaScript      更新时间:2023-09-26

我正在制作一个多步骤捐赠表单,通过使用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;
    }
});