Question

我正在使用intro.js在我们的网站上显示帮助。

有时，我们将用户带到一个按钮，希望他单击它，一旦他单击它，就会在运行时添加一个新元素。这个新元素是下一步的选择器。

但是，当用户转到下一步时，尽管可以在页面中直观看到新添加的元素，但未突出显示该元素。

请访问此小提琴。用户将单击开始介绍按钮，然后在第一步中突出显示的按钮将添加新的输入字段，理想情况下，在下一步中应突出显示新的字段。

HTML

<div>
<button type="button" onclick="startIntro();">
  Click Me to Start Intro
</button>
</div>
<div>
<button type="button" id="btnSelect" onclick="showInput();">
  Click Me to Show Input
</button>
</div>
<div id="inputDiv"></div>

Javascript成为主流

var helpDialog;

function showInput(){   
    document.getElementById("inputDiv").innerHTML = "<input id='inputSelect' type='text'>";
  helpDialog.refresh();
}

function startIntro(){
     helpDialog = introJs();
        helpDialog.setOptions({
            steps: [
        {element:"#btnSelect",intro:"Please click here to show input"},
        {element:"#inputSelect",intro:"This is the input added at runtime"}
      ],
            showProgress: true,
            exitOnOverlayClick: false,
            showStepNumbers: false,
            keyboardNavigation: true
        });     
        helpDialog.start();
}

注意：：请注意，我无法使用addStep，因为我有一个库可以从服务器中获取页面的所有步骤并开始介绍。因此，我真的不知道以后应该添加哪个步骤。

此外，useCase使得页面已经以一种在运行时添加元素的方式构建，因此使它们显示或隐藏意味着回到所有屏幕都在更改代码。

Answer 1

根据我对Intro.js文档的了解，这些步骤中提到的元素只是突出显示，但是转换只能通过单击Intro对话框的下一个或上一个按钮来进行。

似乎还分步提到了某个元素，但当时该元素不存在，介绍不会突出显示该元素。

我已经对您的小提琴进行了一些编辑，因此我在开头创建了文本字段并将其设置为隐藏。

<div id="inputDiv"> <input id="inputSelect" type="text" hidden> </div>

并触发转换，我刚刚在showInput（）函数中添加了代码

function showInput(){ document.getElementById("inputSelect").removeAttribute("hidden"); helpDialog.nextStep(); }

JSFiddle

我认为，如果您想添加一个全新的元素而不是仅仅隐藏和显示它，则必须在创建元素之后add a step，然后调用nextStep()函数。

选择在运行Intro时在运行时添加的元素

1 个答案: