如何通过单击 div 来切换 div 可见性？

Question

我正在尝试做一个带有多个选择按钮的视觉小说小游戏，它会略微或更多地改变故事、图像、文本框等……如果没有 javascript，这就像……完全不可能。

或者可能，但它需要数十万页。谁知道。我想避免这种情况。

所以...

有没有办法用另一个类似但不可见的 div 的内容多次（需要时也是 100 次）替换可见 div 的内容 -id="d01"例如 - 包括 javascript 和 css - 使不可见的 div 可见，隐藏以前，但点击 div 本身？

我只能找到只能使用一次的切换和替换，然后返回到第一个内容，但我正在寻找有点不同的东西。

逐渐变化的东西，从 div 1 到 div 100 或更多。

我在智能手机上工作，所以编译器或视觉小说编辑器对我来说是遥不可及的。但通常网站和其他小东西，也有一点 java，对我有用。所以我认为这不会大惊小怪。

我知道一切都有些混乱。对不起。

<div id="d01">

<!-- Content to show at the beginning, with everything it could come

to my mind: text, buttons, images, animations... ; -->

</div>

<div id="d02" style="display:none;">

<!-- Content to show after the first click, similar to the first, but

with light changes: other text, other characters, other images... ; -->

</div>

<div id="d03" style="display:none;">

<!-- Content to show after the second click, like as above; -->

</div>

<div id="d0#"> style="display:none;">

<!-- Content to show after the n. click... U got it at this point, i think; -->

</div>

Answer 1

div而不是在 HTML 中有很多，你可以只使用一个div并使用 javascript 动态替换它的内容首先，在 html 中创建一个 div 元素，让我们把它dialogBox作为它的 id<div id="dialogBox">&nbsp;&nbsp;</div>在javascript中，像这样将对话框声明为数组const dialogs = [&nbsp; {&nbsp; &nbsp; id: '01',&nbsp; &nbsp; text: "Content to show at the beginning, with everything it could come to my mind: text, buttons, images, animations... ;"&nbsp; },&nbsp; {&nbsp; &nbsp; id: '02',&nbsp; &nbsp; text: "Content to show after the second click, like as above;"&nbsp; },&nbsp; {&nbsp; &nbsp; id: '03',&nbsp; &nbsp; text: "Content to show after the n. click... U got it at this point, i think;"&nbsp; }];放什么取决于你，但在这种情况下，我只是放text和id。id目前并不是真正必要的，但我们可以用它来查询，因为将来会有数百个。现在，找到我们的div元素并将其存储到一个变量中const dialogBox = document.getElementById('dialogBox');最后，我们现在可以更新/替换我们的div内容。在这个例子中，我们将在每次鼠标点击时更新内容let index = 0;dialogBox.innerHTML = dialogs[index].textwindow.addEventListener('click', () => {&nbsp; index = (index < dialogs.length - 1) ? ++index : index;&nbsp; dialogBox.innerHTML = dialogs[index].text});在上面的示例中，我们将div其内容的 innerHTML 设置为当前对话框文本。然后，index每次单击鼠标时将值增加 1，然后再次更新 innerHTML。