Как настроить шаг jquery - PullRequest
Новая
       18

Как настроить шаг jquery

0 голосов
/ 13 марта 2019

Создаю мастер шагов, используя библиотеку jquery-step, но мне не удалось его настроить. Как я могу настроить его, чтобы заменить предыдущую и следующую кнопки, когда пользователь переходит к 3 шагу «Подтвердить в деталях» с кнопками да или нет. Это ссылка на jsfiddle с работой:

https://jsfiddle.net/Sunesis/xsd9ozrf/8/

$(function () {
    $('#wizard').steps({
        headerTag:"h2",
        bodyTag: "fieldset",
        transitionEffect: "slideLeft",
        onStepChanging: function (event, currentIndex, newIndex) {



            if ( newIndex === 1 ) {
                console.log('Verification Code')
            }
            if ( newIndex === 2 ) {
                console.log('Confirm details')
            }

            if(newIndex === 3){

            }
            return true;
        },
        labels:{
            finish: "✓",
            next: "⇾",
            previous: "⇽"
        }
    });
});

Ответы [ 2 ]

0 голосов
/ 13 марта 2019

Самый простой способ сделать это - использовать JQuery, доступ к кнопке можно получить по $('a[href$="#previous"]'). Чтобы иметь возможность использовать JQuery, добавьте эту ссылку в свой проект <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>.

Так что попробуйте код ниже, должно работать нормально. В скрипке: https://jsfiddle.net/g1sxtLv0/3/


$(function () {
    $('#wizard').steps({
        headerTag:"h2",
        bodyTag: "fieldset",
        transitionEffect: "slideLeft",
        onStepChanging: function (event, currentIndex, newIndex) {

            if ( newIndex === 1 ) {
                console.log('Verification Code')
            }
            if ( newIndex === 2 ) {
                console.log('Confirm details')
                $('a[href$="#previous"]').html('No');
                $('a[href$="#next"]').html('Yes');
            }

            if(newIndex === 3){
              $('a[href$="#previous"]').html('&#8701;');
              $('a[href$="#next"]').html('&#8702;');
            }
            return true;
        },
        labels:{
            finish: "&#10003;",
            next: "&#8702;",
            previous: "&#8701;"
        }
    });
});
0 голосов
/ 13 марта 2019

JQuery не используется в HTML-файле пожалуйста, используйте скрипт jquery, как показано ниже 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"></script>

я меняю ссылку на jsfiddle https://jsfiddle.net/Sunesis/xsd9ozrf/6/

...