如何自定义 jquery 步骤

Question

正在使用 jquery-step 库创建一个步骤向导，但我无法自定义它。当用户使用是或否按钮滑动到 "confirm in details" 的第 3 步时，如何自定义它以替换上一个和下一个按钮。这是 jsfiddle 的 link 作品：

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: "&#10003;",
            next: "&#8702;",
            previous: "&#8701;"
        }
    });
});

Answer 1

JQuery 未在 html 文件中使用请使用与下面相同的 jquery 脚本

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

我改变你的 jsfiddle link https://jsfiddle.net/Sunesis/xsd9ozrf/6/

Answer 2

最简单的方法是使用 JQuery，您可以通过 $('a[href$="#previous"]') 访问该按钮。为了能够使用 JQuery，请将此 link 添加到您的项目 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>。

所以尝试下面的代码，应该可以正常工作。在 fiddle 中：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;"
        }
    });
});

如何自定义 jquery 步骤

How to customizer jquery step

jquery

jquery-steps