霍普奇乘法旅行不起作用

Question

我正在尝试为我的应用程序实施Hopscotch Tour。创建问题。如果这些是导航之前第1页的步骤

var tour = {
      id: "hello-hopscotch",
      steps: [
        {
          title: "Header Page",
          content: "We're going to the next page now...",
          target: "#header",
          placement: "bottom",
          multipage: true,
          onNext: function() {
            window.location = "/#/configuration"
          }
        },
        {
          title: "My content",
          content: "Here is where I put my content.",
          target: document.querySelector("#content p"),
          placement: "bottom"
        }
      ]
    };

第二页中的这

    if (hopscotch.getState() === "hello-hopscotch:1") {
      hopscotch.startTour(
     id: "hello-hopscotch",
      steps: [
        {
          title: "Header Page",
          content: "We're going to the next page now...",
          target: "#header",
          placement: "bottom",
          multipage: true,
          onNext: function() {
            window.location = "/#/configuration"
          }
        },
        {
          title: "Configuration page",
          content: "Here is where I put my content.",
          target: "#configuration",
          placement: "bottom"
        }
      ]
 );
    }

到底应该在第一页和第二页中的步骤，以使巡回赛从一个页面导航到另一页。

这不起作用，在导航到第二页之后，它仍然会重复相同的步骤，有时它不会显示任何步骤。我可以使用hopscotch详细构造乘法游览。

Answer 1

据我所知，我也猜在这里有点猜测，因为我看不到完整的代码，因此您无法正确定义旅行对象，然后不启动在第2页上正确的巡回演出，也可能在第1页上进行。那里(至少从纯JS的角度来看(也是语法错误，这可能解释了为什么代码不起作用。

第1页上的代码应为：

var tour = {
      id: "hello-hopscotch",
      steps: [
        {
          title: "Header Page",
          content: "We're going to the next page now...",
          target: "#header",
          placement: "bottom",
          multipage: true,
          onNext: function() {
            window.location = "/#/configuration"
          }
        },
        {
          title: "My content",
          content: "Here is where I put my content.",
          target: document.querySelector("#content p"),
          placement: "bottom"
        }
      ]
    };
// Start the tour!
    hopscotch.startTour(tour);

我们在这里做的是定义"巡回赛"，然后开始。请注意，乘法：在应在下一页上的步骤之前，在步骤中进行true将改变"状态"的工作方式以及如何提出的行为。您可以随时使用hopscotch.getState()

检查状态

第2页上的代码应为：

var tour = {
id: "hello-hopscotch",
      steps: [
        {
          title: "Header Page",
          content: "We're going to the next page now...",
          target: "#header",
          placement: "bottom",
          multipage: true,
          onNext: function() {
            window.location = "/#/configuration"
          }
        },
        {
          title: "Configuration page",
          content: "Here is where I put my content.",
          target: "#configuration",
          placement: "bottom"
        }
      ]
 }; //note that you incorrectly had ); here before
if (hopscotch.getState() === "hello-hopscotch:1") {
      hopscotch.startTour(tour);
}

这应该对您有用。