1

我正在做一个互动培训课程，由于培训课程涵盖的主题数量，我试图打破单调并插入一些“演练”来帮助解释概念。我的问题是如何在同一页面上插入多个演练，并在单击特定按钮时让它们触发正确的演练。

我正在使用这个插件：https ://github.com/jwarby/jquery-pagewalkthrough 。虽然我可以让每个演练彼此独立工作，但如果我在同一页面上以任何方式组合代码，不可避免地第二个演练永远不会触发。

以下代码块当前驻留在文件中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 函数。我最接近正确触发的是当按下“除法”按钮时（它是层次结构中的第二个按钮），“乘法”演练显示，但如果我再次按下“除法”按钮关闭“乘法”演练后，“除法”演练正确显示。

有什么想法吗？

4

1 回答 1

1

做更多的阅读和研究，我发现了这个笔记：https ://github.com/jwarby/jquery-pagewalkthrough#showname 。

通过更改我称为演练的方式，它们现在可以正确显示。我现在这样称呼演练：

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

而不是旧的方式：

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

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

于 2014-09-23T12:23:36.180 回答