0

代码已更新。. 请看一看

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

  • 上一页
  • 下一个
  • 结尾

默认情况下Prev和Next按钮工作正常。

我做了一些修改：

  • 添加了 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 函数，因此它再次转到我们在显示的定义的第 3 步

4

1 回答 1

0

您只需要添加一个变量来指示您最后去了哪里（即后退或前进），然后使用此变量您将知道您应该 goTo() 第一步还是最后一步：

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

小提琴

看到这个链接

于 2014-05-22T12:35:01.017 回答