tour.prev()或onPrev ?如果我跳过一步使用onshow移动下一步

tour.prev() or onPrev ? if I am skipping step using onShown for moving next

本文关键字：一步 移动 下一步 onshow onPrev prev 如果 tour      更新时间：2023-09-26

代码已更新。请看

我正在创建应用程序演练。这里我们有三个按钮

  • :
    • 下>

默认上一键和下一键工作正常。

我做了一些修改:

  • 增加了 onshow ，如果不为空则跳过该步骤。如果我点击下一步按钮，那么它不会移动到上一步。

我应该用什么?tour.prev()或onPrev?我两种方法都试过了，但都没有解决问题。

有什么建议吗?

参考代码:

<div id="id1">One</div>
<div id="id2">Two</div>
<div id="id3">Three</div>
var tour = new Tour();
tour.addSteps([
        {
            element:" #id1",
            title: "1",
            content: "1st Content.",
            placement: "top",
            onShow: function () {
                console.log('This is Onshow Function');
            },
        },
        {
            element:" #id2",
            title: "2",
            content: "2nd Content",
            placement: "top",
            onShow: function () {
                console.log('second step');         
            },
            onShown: function () {       
                client_text = $('#id2').text();
                if(client_text != ''){
                    console.log('----------client code present----------');
                    tour.goTo(2)    
                }
                else{
                    console.log('-------client code not present--------');
                }
            },
            onPrev: function(){
                 tour.prev
             }
        },
        {
            element:" #id3",
            title: "3",
            content: "3rd Content",
            placement: "top",           
            onShow: function () {
                console.log('third step');          
            } ,
             onPrev: function(){
                 tour.prev
             }
        }
    ]);
tour.init();
tour.restart();

这里有一个问题。当我点击第三步的prev按钮时它就会跳转到第二步并执行onShow函数因此它又会跳转到第三步正如我们在show

中定义的那样

你只需要添加一个变量来指示你最后去的地方(即后退或前进)，然后使用这个变量你就会知道你是应该在第一步还是最后一步goTo():

<div id="id1">One</div>
<div id="id2">Two</div>
<div id="id3">Three</div>

JS 

var tour = new Tour();
var dir = 'next';
tour.addSteps([
        {
            element:" #id1",
            title: "1",
            content: "1st Content.",
            placement: "top",
            onShow: function () {
                console.log('This is Onshow Function');
            },
            onNext: function() {
                dir = 'next';
            }
        },
        {
            element:" #id2",
            title: "2",
            content: "2nd Content",
            placement: "top",
            onShow: function () {
                console.log('second step');         
            },
            onShown: function () {       
                client_text = $('#id2').text();
                if(client_text != ''){
                    console.log('----------client code present----------');
                    if(dir == 'next') {
                        tour.goTo(2);  
                    }
                }
                else{
                    console.log('-------client code not present--------');
                }
            },
        },
        {
            element:" #id3",
            title: "3",
            content: "3rd Content",
            placement: "top",           
            onShow: function () {
                console.log('third step');          
            },
            onPrev: function() {
                dir = 'prev';
            }       
        }
    ]);
tour.init();
tour.restart();

小提琴

查看此链接

相关文章：