jquery JavaScript多步表单在返回更新的变量时不会更新函数外部的变量值

68de4m5k  于 2022-11-03  发布在  jQuery
关注(0)|答案(1)|浏览(91)

我正在开发一个多步骤的捐赠表单,它使用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变量的值。当使用此函数单击Next按钮时,将调用此函数:

//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引导程序
  • jQuery 1.8.2版本
  • PHP 5语言
    **UPDATE:**当将return currentStep;移动到出现的$("#step" currentStep).slideToggle("slow")'之后时,它将传递到步骤2,但不允许我前进到步骤3或返回到步骤1。
    **UPDATE 2:**当将其移动到ifelse部分之后,但仍在回调内部时,它没有正确更新,也不允许我从#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;
}
lndjwyie

lndjwyie1#

已修复:

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;
    }
});

相关问题