Question

代码已更新。。请好好看看

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

上一页
下一步
结束

默认上一个和下一个按钮正常工作。

我做了一些修改：

如果该步骤不为空白，则添加 onShown 以跳过该步骤。
所以如果我点击了下一步按钮，那么它就不会移到上一步了。

我该怎么用？ 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();

在这一个问题就在那里。当我点击第3步的prev按钮然后它进入第2步并执行onShow函数，因此它再次转到我们在显示中定义的第三步

Answer 1

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

<强> HTML

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

<强> FIDDLE

请参阅此link

tour.prev（）或onPrev？如果我使用onShown跳过下一步移动步骤

1 个答案: