时间戳

首页 > 解决方案 > 如何在 ionic 3 中使用 shepherd 和 jquery？

jquery - 如何在 ionic 3 中使用 shepherd 和 jquery？

问题描述

我正在尝试在我的 ionic 3 应用程序中构建巡回演出，因此我选择Shepherd来实现它。

但是在ionic 3中，它是一个打字稿框架，所以我们不能直接在html文件中调用jQuery，而是在.ts文件中。牧羊人有一个函数调用'addStep'，比如

tour.addStep('example-step', {
    text: 'Testing',
    attachTo: '.example-css-selector bottom',
    classes: 'example-step-extra-class',
    buttons: [
       {
          text: 'Next',
          action: tour.next
       }
    ]
});

所以，我已经安装了 jQuery 和 shepherd 插件。但是当尝试下面的代码时，它不起作用。

在 home.html

<p>Title</p>
<button id="shepherdElement">Click Me</button>

在 home.ts

const tour = new Shepherd.Tour();

tour.addStep('example-step', {
      text: 'Testing',
      attachTo: $('#shepherdElement')
  });

tour.start();

我希望这次旅行会附加到#shepherdElement，但事实并非如此。

实际图像图片

标签： jqueryionic-frameworkplugins

解决方案

我不确定通过 Jquery 访问，但如果 id 选择器只是您的问题，那么您可以通过以下方式访问它。

const tour = new Shepherd.Tour();
tour.addStep('example-step', {
  text: 'Testing',
  attachTo: '#shepherdElement'
  });
tour.start();

推荐阅读