9

アプリにホップスコッチツアーをいくつか実装しています。

これまで問題なく多くのツアーをこなしてきましたが、今日は解決できなかった課題に直面しています。

私の質問は、動的に生成されたコンテンツで動作するツアー ステップ ターゲットを取得するにはどうすればよいですか?

HTMLは次のとおりです。

<div class="pacote-destino-quartos-wrapper">
    <div class="pacote-destino-quartos-internal-wrapper">
        <h4>Todos os Destinos</h4>
        <div class="dynamic_nested_form_wrapper quartos_external_wrapper" data-destino="todos">
            <span class="add-child-link-wrapper">
                <a href="javascript:void(0)" class="add_child btn btn-info" data-association="quartos">
                    <i class="icon-plus icon-white"></i>
                </a>
            </span>
        </div>
    </div>
</div>

リンクをクリックするたびに、多くの要素を含む div が動的に作成されます。そのうちの 1 つは、というクラスを持つ div.quarto-config-wrapperです。

Hopscotch ツアーをこの要素に移動させようとしても、うまくいきません。私の推測では、動的に作成された要素は DOM で操作することはできません。

これが私のHopscotchステップコードです：

{
    title: "Adicionar um novo quarto",
    content: "content here",
    target: $('.add-child-link-wrapper')[0],
    placement: "left",
    width: 500,
    yOffset: -15,
    nextOnTargetClick: true,
    showNextButton: false
},
{
    title: "Menu de configuração do quarto",
    content: "content here",
    target: $('.quarto-config-wrapper')[0],
    placement: "left",
    width: 700,
    yOffset: -15,
    nextOnTargetClick: true,
    showNextButton: false,
    delay: 1200
}

最初のステップは機能しますが、2 番目のステップは機能しません。

私は何を間違っていますか?どうすれば修正できますか?

4

6 に答える 6

8

私はこの問題の解決策をあちこちで検索しましたが、この投稿は最も近いものですが、決定的な解決策ではないため、次のようになります。

{ // This is the previous step
    element: "#idElement",
    title: "The Title",
    content: "The Content",
    onNext: function(tour) {
            tour.end();
            var checkExist = setInterval(function() {
                // This is the element from the next step. 
                $element = $('#idElementFromNextStep'); 

                if ($element.is(':visible')) {
                    clearInterval(checkExist);
                    tour.start(true); // True is to force the tour to start
                    tour.goTo(1); // The number is your next index (remember its base 0)
                }
            }, 100);
    },
    multipage: true, // Required
    orphan: true // Recommended
},{ // This is the step that was not working
    element: "#idElementFromNextStep",
    title: "Title of the step",
    content: "Details of the step",
    orphan: true,
}

したがって、これは基本的に、次の要素が起動されたときにツアーを停止し、要素が DOM に追加されるのを待ってから、インデックスによって正しいステップからツアーを再開することです。

@Luksurious から少しコードを借りました。彼のソリューションの種類は機能しますが (ただし、Bootstrap Tour では機能しません)、いずれにせよ、次のステップをロードして正しいステップに戻るときにフリックが生成されます。

遅延を使用しないことを強くお勧めします。ローカル環境では機能しているように見えるかもしれませんが、クライアントの読み込みにかかる時間を推測するのは非常に危険です。

それが他の誰かに役立つことを願っています！

于 2015-03-08T00:22:19.040 に答える
2

AJAX 呼び出しを待機するために私が行うことは次のとおりです。

{
  title: "Title",
  content: "Content",
  target: '.triggerAjax',
  placement: 'bottom',
  onNext: function() {
    $('.triggerAjax').click();

    var checkExist = setInterval(function() {
      $element = $('.dynamicallyLoaded');

      if ($element.is(':visible')) {
        clearInterval(checkExist);

        window.hopscotch.startTour(window.hopscotch.getCurrTour(), window.hopscotch.getCurrStepNum());
      }
    }, 100);
  },
  multipage: true
},

を使用するmultipageと、hopscotch は続行しないように指示されます。次に、onNext関数は次にターゲットにする要素が存在するかどうかを確認し、ツアーを再開します。

もちろん、これがより頻繁に必要な場合は、一般的な関数として抽出して、コードをクリーンで短く保ちます。

于 2014-07-16T13:48:12.947 に答える
1

別の解決策 (表示しているモーダルが別のページである場合に非常にうまく機能します) は、複数ページのツアーの例から借りることです。基本的に、モーダルをポップアップするページで、ツアーを開始します。ただし、モーダルが実際に読み込まれるページ (または動的に生成されたコンテンツの一部として) では、 のようなことを行うことができますif (hopscotch.getState() == 'intro_tour:1') { hopscotch.startTour() }。これにより、基本的にローダー ページによって開始されたツアーが続行されます。モーダルがロードするものに応じて、このメソッドを使用した YMMV。

于 2014-04-15T19:38:25.167 に答える
0

誰の提案もうまくいきませんでした。問題はtarget、動的に生成されたコンテンツの属性が、ツアーの開始時 (まだページにないとき) に計算されることです。

私にとってうまくいくのは、あるツアーを別のツアーの中にネストすることです。これが私のテスト済みの動作コードです：

var tourP1 = {
  id: "tutp1",
  steps: [
    {
      title: "Step 1",
      content: "Lorem ipsum dolor.",
      target: "header",
      placement: "bottom"
    },
    {
      title: "Step 2",
      content: "Lorem ipsum dolor.",
      target: document.querySelector('#content'),
      placement: "top",
      multipage: true,
      onNext: function() {
        // Trigger dynamic content
        $('.someElement').trigger('click');
        // Wait for your target to become visible
        var checkExist = setInterval(function() {
          $element = $('.someElement').find('.myElement');
          if ($element.is(':visible')) {
            clearInterval(checkExist);
            // End this tour
            hopscotch.endTour(true);
            // Define the next tour
            var tourP2 = {
              id: "tutp2",
              steps: [
                {
                  title: "Step 3",
                  content: "Lorem ipsum dolor.",
                  target: $('.someElement').find('.myElement')[0],
                  placement: "bottom"
                }
              ]
            }
            // Start the nested tour
            hopscotch.startTour(tourP2);
          }
        }, 100);
      }
    },
    // This is needed for the onNext function in the previous step to work
    {
      title: "",
      target: "",
      placement: ""
    }
  ]
};

ここでの 1 つの注意点は、ネストされたツアーが開始されると、ステップ番号が 1 に戻ることです。ハックは、いくつかのプレースホルダー ステップでツアーをパディングし、「実際の」最初のステップから開始することです (うん!)。本当に必要なのは、ステップ オプションでステップ番号を指定する方法です。

于 2016-07-27T08:27:18.733 に答える