0

我最近使用 Jquery Steps 为客户构建了一个葬礼费用计算器工具。

该工具的表单非常复杂，因为许多步骤取决于是否选择了某些表单选项。

我自己通过使用触发单选按钮的“onchange”的“插入”和“删除”方法来解决这个问题。当用户选择发生死亡时，有 7 个步骤。当用户选择没有发生死亡时，有 5 个步骤（见附图）。（请参阅下面的一些示例代码）

没有死亡发生（截图）

死亡事件（截图）

这些步骤在索引 4 处插入和删除。如果用户在选项之间来回切换，它将插入 2，然后删除 2，插入 2，然后删除 2，等等。我发现这很简单。

当我需要应用类似条件时，问题就来了。但是，我发现我无法专门针对要插入或删除的索引，因为我无法预测此时有多少步骤（因为它基于用户之前的选择 - 见上文）。

我的javascript知识有限，所以我很茫然。我知道使它工作所需的逻辑，我只是​​不知道如何实现它。

我想知道如何使用 javascript/jquery 来计算步骤数（以针对最后一步）并针对当前步骤。当然，除非有人可以提出更简单或更好的方法。

我一直在为此绞尽脑汁，任何帮助将不胜感激。谢谢！

<input type="radio" name="deathOccurred" rel="death-occured-yes" value="Yes"  class="required" onclick="calculateTotal()" onchange="$('#estimator-form').steps('insert', 4, {
    title: 'Clergy/Celebrant',
    content: '<STEP HTML HERE>'
});
$('#estimator-form').steps('insert', 5, {
title: 'Other options',
content: '<STEP HTML HERE>'
/> Yes &nbsp;&nbsp;
<input type="radio" name="deathOccurred" rel="death-occured-no" value="No" checked  onclick="calculateTotal()" onchange="$('#estimator-form').steps('remove', 5, {});  $('#estimator-form').steps('remove', 4, {});" /> No
4

2 回答 2

1

如果这是您正在使用的插件，它似乎没有您期望的方法大小或长度。也许您可以通过使用 jquery 并计算例如 h1 元素的数量来弄清楚自己。

var wizardLength = $("#estimator-form").find('h1').length;

因此，如果您使用方法“添加”而不是插入，我想它将最后附加。当你想删除最后一个时，你可以使用 index = wizardLength - 1 的“remove”。

于 2014-03-25T09:38:02.397 回答
-2

我将此功能添加到 jquery.steps.js 中，因为我动态地创建了步骤，并且我需要在整个应用程序中获取步数。以下是您需要添加到文件中才能获得向导中的全部步骤的内容：

在 jquery.steps（大约第 1360 行）中添加以下代码：

$.fn.steps.numberSteps = function (step)
{
    var state = getState(this);
    return state.stepCount;
};

在您的 HTML 页面的 jquery 代码中，我这样声明我的向导：

var wizard = form.children("div").steps({
        headerTag: "h3",
        bodyTag: "section",
        transitionEffect: "fade",
        stepsOrientation: "vertical",
        contentMode: 2,
        saveState: true,
        startIndex: 0,
        ....

然后使用此调用获取步数：

var lastWizardStep =  wizard.steps("numberSteps");
于 2015-02-25T21:11:04.213 回答