1

私はインタラクティブなトレーニング コースに取り組んでいます。トレーニング コースで扱う科目の数が多いため、単調さを解消し、概念の説明に役立つ「ウォークスルー」を挿入しようとしています。私の質問は、同じページに複数のウォークスルーを挿入し、特定のボタンがクリックされたときに正しいウォークスルーを起動する方法です。

私はこのプラグインを使用しています: https://github.com/jwarby/jquery-pagewalkthrough。各ウォークスルーを互いに独立して動作させることはできますが、同じページでコードを何らかの方法で組み合わせると、必然的に 2 番目のウォークスルーが起動しなくなります。

現在、次のコード ブロックがファイルに存在します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
    });
});

そして 2 番目のウォークスルー:

$('#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 ファイル内ではなく、ページからクリック関数を呼び出してみました。両方の発射に最も近いのは、「除算」のボタン (階層の 2 番目のボタン) が押されたときで、「乗算」ウォークスルーが表示されますが、「除算」ボタンをもう一度押すと「乗算」ウォークスルーを閉じた後、「除算」ウォークスルーが正しく表示されます。

何かご意見は？

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 に答える