問題タブ [hopscotch]

ウェブサイトの LinkedIn ツアーを設定しています。http://linkedin.github.io/hopscotch/ 正常に動作しています。しかし、完了ボタンのテキストを変更する必要があります。次の行 i18n.doneBtn を配置すると、静的ページが表示されますが、動的実行は停止し、ツアーは表示されません。それを修正する方法について何か提案はありますか？ありがとう！

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

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

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

HTMLは次のとおりです。

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

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

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

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

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

hopscotch.js を使用してインタラクティブ ツアーを作成しようとしています。ツアーが機能するために JavaScript ライブラリが必要とする標準的なデータ構造は次のとおりです。

ツアーの手順を JavaScript ライブラリに直接入れることは完全にうまく機能しますが、理想的には、これらすべての詳細をデータベースに保持し、AJAX を使用してデータを hopscotch.js に渡すことができるようにしたいと考えています。(これは、ツアーを動的に作成しcontent、コードをリリースせずに変更できるようにするためです)。

私が要素セレクターtargetを使用しているときを除いて、すべてが正常に機能しています。document.querySelector()

各ツアー ステップの基本的な C# モデルは次のとおりです。

文字列と同様Targetに、値を二重引用符で囲む必要があります。

これに関する問題は、JSON にシリアル化されると、Chrome 開発者ツールでページを表示すると、次のエラーが発生することです。

Syntax error, unrecognized expression: document.querySelector(".btn-primary")

ページに返された JSON データを調べると、mydocument.querySelector()を二重引用符で囲んでいることが問題の原因であることがわかります。

via をtarget指定するときはこれらの二重引用符を my から削除する必要がありますが、などの HTML タグに基づいて を指定するときは二重引用符を残す必要があります。targetdocument.querySelector()targetheader

これを達成する方法はありますか？

Hopscotchのサンプル ツアーでは、パラメーターと呼び出しが設定されていますがhopscotch.startTour(tour);、ページが読み込まれた後、閉じる「x」ボタンも「完了」ボタンも再生を妨げないようです。

それはどのように達成できますか。