Jquery页面漫游多个漫游'；它在同一页上

我正在参加一个互动培训课程，由于培训课程涉及的科目很多，我试图打破单调，插入一些“演练”来帮助解释概念。我的问题是如何在同一页面上插入多个漫游，并在单击特定按钮时让它们触发正确的漫游

我正在使用这个插件：。虽然我可以让每个遍历独立地工作，但如果我在同一页上以任何方式组合代码，第二个遍历将不可避免地永远不会启动

以下代码块当前位于文件

main.js

中。这是第一次演练的代码：

$('#division').on('click', function(e){
    $('#division').pagewalkthrough('show');
    $('#division').pagewalkthrough({
        name: 'division',
        steps: [{
            wrapper: '#slide12 ftop',
            popup: {
                content: '#dividewalkthrough-1',
                type: 'modal'
            }
        }],
        onLoad: true
    });
});

第二步是：

$('#multiply').on('click', function(e){
    $('#multiply').pagewalkthrough('show');
    $('#multiply').pagewalkthrough({
        name: 'multiply',
        steps: [{
            wrapper: '#slide10 .ftop',
            popup: {
                content: '#walkthrough-1',
                type: 'tooltip',
                position: 'bottom'
            }
        }, {
            wrapper: '#slide10 .fsol',
            popup: {
                content: '#walkthrough-2',
                type: 'tooltip',
                position: 'bottom',
            },
            onEnter: function(){
                $('#slide10 .fsol').show();
                return true;
            },
            onLeave: function(){
                var bcol3 = $('#slide10 .fsol .bcol3').val(),
                bcol4 = $('#slide10 .fsol .bcol4').val(),
                bcol5 = $('#slide10 .fsol .bcol5').val(),
                bcol6 = $('#slide10 .fsol .bcol6').val();
                if(bcol3 != "" && bcol4 != "" && bcol5 != "" && bcol6 != ""){
                    return true;
                }else{
                    alert('You must fill in each column');
                    return false;
                }
            }
        }, {
            wrapper: '#slide10 .ssol',
            popup: {
                content: '#walkthrough-3',
                type: 'tooltip',
                position: 'bottom'
            },
            onEnter: function(){
                $('#slide10 .ssol').show();
                return true;
            },
            onLeave: function(){
                var bcol3 = $('#slide10 .ssol .bcol3').val(),
                bcol4 = $('#slide10 .ssol .bcol4').val(),
                bcol5 = $('#slide10 .ssol .bcol5').val();
                if(bcol3 != "" && bcol4 != "" && bcol5 != ""){
                    return true;
                }else{
                    alert('You must fill in each column');
                    return false;
                }
            }
        }],
        onLoad: true
    });
});

我尝试过完全分离代码，并将代码块放在不同的.js文件中。我尝试从页面而不是在.js文件中调用click函数。我最接近于两次正确触发的是按下“除法”按钮（这是层次结构中的第二个按钮）时，“乘法”遍历显示，但如果在关闭“乘法”遍历后再次按下“除法”按钮，则“除法”遍历显示正确

---

有什么想法吗？

在做更多的阅读和研究时，我发现了这张便条：

通过改变我称之为漫游的方式，它们现在显示正确。我现在称之为走查，如下所示：

$('#multiply').on('click', function(){
    $.pagewalkthrough('show', 'multiply');
});

而不是老办法：

$('#division').on('click', function(e){
    $('#division').pagewalkthrough('show');
});

---

希望这对以后的其他人有所帮助。

嗨，迈克尔。它起作用了吗？我也面临同样的问题。