0

我正在研究一个多步骤捐赠表格，该表格通过使用 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

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

我在用

  • 推特引导
  • jQuery 1.8.2
  • PHP 5

更新：当return currentStep;发生在$("#step" currentStep).slideToggle("slow")''s 之后发生时，它将转到第 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;
}
4

1 回答 1

0

固定的：

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;
    }
});
于 2013-01-09T16:27:46.677 回答