Question

我正在制作一个多步骤捐赠表单，使用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等进行简单测试的页面在线版本here。

主页的完整版可以在这里找到： http://pastebin.com/TtTZCf06

可以在此处找到正在使用的完整版JavaScript： http://pastebin.com/KgLJGUSA

提前感谢大家的时间和帮助。

我正在使用

Twitter Bootstrap
jQuery 1.8.2
PHP 5

更新：在发生return currentStep;之后移动$("#step" currentStep).slideToggle("slow")'时，它将转到第2步，但不允许我继续前进到第3步或返回第1步。

更新2 ：将其移至if else部分之后，但仍然在回调中，它没有正确更新，也不会让我走向前或向后#step2

* 更新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;
}

Answer 1

修正：

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多步形式不会更新函数外的变量值

1 个答案: