javascript - 如何从 intro.js 工具提示动态添加或删除下一个/上一个按钮

Question

我正在使用 intro.js 通过网站创建游览，但我需要根据提示动态添加下一个/上一个按钮。

示例:我希望在第三个工具提示上有下一个/上一个按钮，但在第一个和第二个工具提示上没有。原因是我试图通过单击网站上的按钮而不是工具提示中的下一个按钮来帮助用户浏览网站，以提供更具互动性的浏览。这是我的代码:

        want_tour.click(function() {
                    var introguide = introJs();
                    introguide.setOptions({
                          showStepNumbers: false,
                          showBullets: false,
                          showButtons: false,
                          scrollToElement: true,
                          exitOnEsc: true,
                          exitOnOverlayClick: false,
                          steps: [
                                {
                                      element: '#postcodeEntry',
                                      intro: 'Enter Postcode',
                                      position: 'bottom'
                                },
                                {
                                      element: '.home_Intro_Main',
                                      intro: 'Register or Start Shopping',
                                      position: 'bottom'
                                },
                                {
                                      element: '#searchform ',
                                      intro: 'Search',
                                      position: 'bottom'
                                },
                                {
                                      element: '.mainNavigation ',
                                      intro: 'Categories',
                                      position: 'bottom'
                                }
                          ]
                    }); 
                    introguide.start();
                    $('.chk-my-postcode').click(function() {
                          console.log("Clicked: .chk-my-postcode");
                          want_tour.hide();
                          introguide.goToStep(1).start();
                    });
                    $('#startShoppingWeDeliver').click(function() {
                          console.log("Clicked: #startShoppingWeDeliver");
                          introguide.setOption("skipLabel", "ExitOption");
                          introguide.setOptions({ skipLabel: 'ExitOptions', showButtons: true});
                          introguide.goToStep(2).start();
                    }); 
              });

目前，skipLabel 标记通过使用 setOption() 或 setOptions() 更改其文本，但所需的 showButtons 未设置为 false。

您能告诉我该怎么做吗？

Answer 1

introjs-disabled 类现在添加到第一步的“上一步”按钮和最后一步的“下一步”按钮。我真的只是想隐藏它们，所以我将以下内容添加到我的 CSS 中。噗!完成!

.introjs-disabled {
     display: none !important;
}