如何自定义jQuery步骤

Question

我正在使用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: "⇽"
        }
    });
});

Answer 1

在HTML文件中未使用jQuery 请使用与下面相同的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/

Answer 2

最简单的方法是使用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('⇽');
              $('a[href$="#next"]').html('⇾');
            }
            return true;
        },
        labels:{
            finish: "✓",
            next: "⇾",
            previous: "⇽"
        }
    });
});