JQuery Steps -计算步数(当它们动态变化时)，以便我可以在特定点插入/删除

JQuery Steps - calculating number of steps (as they change dynamically) so that I can insert/remove at specific point

本文关键字：我可以 删除 插入 计算 Steps 变化 动态 JQuery      更新时间：2023-09-26

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

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

我通过使用触发单选按钮的"onchange"的"insert"answers"remove"方法来设法适应这一点。当用户选择死亡发生时，有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

如果这是你正在使用的插件，它似乎没有一个方法的大小，或长度，如你所期望的。也许你可以通过使用jquery和计数自己，例如h1元素的数量。

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

所以如果你使用方法'add'而不是insert，我想它会最后追加。当你想删除最后一个，你可以使用'remove' index = wizardLength - 1。

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

在jquery

。步骤(第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");
相关文章：