JQuery Steps - вычисление количества шагов (так как они меняются динамически), чтобы я мог вставить / удалить в определенной точке

Question

JQuery Steps - вычисление количества шагов (так как они меняются динамически), чтобы я мог вставить / удалить в определенной точке

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

user2789786 25 март 2014, в 10:24

Источник

Теги:

javascript

jquery

onchange

onclick

jquery-steps

2 ответа

Ещё вопросы

burktelefon · Answer 1 · 2014-03-25T06-45-00.000Z

Если это плагин, который вы используете, у него нет размера метода или длины, как вы ожидали бы. Возможно, вы можете выяснить себя, используя jquery и count, например, количество элементов h1.

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

Поэтому, если вы используете метод "add" вместо вставки, я предполагаю, что он будет добавлен последним. И когда вы хотите удалить последнее, вы можете использовать 'remove' с index = wizardLength - 1.

lanrosta · Answer 2 · 2015-02-25T19-40-00.000Z

Я добавил эту функцию в jquery.steps.js, потому что я динамически создаю шаги, и мне нужно получить количество шагов в моем приложении. Вот что вам нужно добавить к файлам, чтобы получить общие шаги в мастере:

В jquery.steps (около строки 1360) добавьте этот код:

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

В коде jQuery HTML-страницы я объявляю свой мастер следующим образом:

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