Javascript在多个深度级别上显示/隐藏

我需要帮助理解如何在有多个级别的元素要显示/隐藏的情况下编写显示/隐藏javascript

我希望这不太难解释

我们当前系统的工作原理是将CSS类添加到输入中，例如单选按钮选项或复选框。CSS类将是“show-question2”

需要切换为“show/hide”的元素被赋予类“showable-question2”

Javascript函数侦听click事件，将css类“show-{0}与具有相应“showable-{0}”的元素匹配，并切换其可见性

我的问题：

例如，如果您有一个问题，根据您的回答方式，将显示/隐藏一个新问题

---

但如果你如何回答第二个问题意味着第三个问题被“显示”，我就遇到了一个问题

如果我回去以不同的方式回答原始问题，正如预期的那样，第二个问题将被隐藏，因为其可见性已被关闭，但第三个从属问题仍然可见

为了实现我的目标，这些元素需要嵌套在Html中吗

编辑

问题在于，问题依赖于其他问题

因此，如果问题1由列表中的答案回答，然后触发第二个问题，那么在本例中，第二个问题将显示给最终用户

因此，您切换问题2的可见性取决于如何回答问题1

问题2可能也有受抚养人，因此如果用户使用特定选项回答问题2，则第三个问题将可见

问题3是问题2的受抚养人

现在，如果用户决定他们已经改变了主意，并且对问题1选择了不同的答案，那么问题2现在就没有要求了，它将被隐藏

---

问题是，问题1不会切换问题3的可见性，而问题3将保持可见，并且只与问题2相关，问题2已被隐藏且不再需要。

为什么不更改javascript以实现所寻求的行为？ 基本上，您希望实现一系列状态，以及一些关于状态转换的特定规则，您需要将这些规则放入函数中。 您的模型是一个数组

[{question\u number，answer，answer\u eval}]

answer\u eval

可以是例如

good

，

bad

。 您的状态是一个数组

[{question number，show}]

show

例如可以是

display

或

hide

当你点击一个问题时，你会得到该问题的编号，你的数组中有当前的状态和模型，你想决定你的下一个状态。写一个函数来实现这个功能

因此它是一个函数

f:：（事件、状态、模型）->（状态、模型）

可以在这些行周围指定：

• 事件：单击

• 获取问题的编号
• 提出那个问题
• 用

  答案评估

  不

  好

  隐藏所有其他问题（这应该包括隐藏第三个问题）
• 隐藏所有其他相关问题（应包括隐藏第二个问题）
• 更新模型和状态数组
• 事件：评估答案

• 获取问题的编号
• 计算

  答案评估
  

• 好=>显示相关问题
• 坏=>你在这里的行为
• 更新模型和状态数组

我不太明白你在点击后想要什么样的行为，但原则总是一样的。如果你能指定它，你就可以编写它

---

希望这有帮助

一点代码会非常有帮助；）展示你做了什么“但是如果你如何回答第二个问题意味着第三个问题被“展示”，我会遇到一个问题。“<---------我对网站行为应该是什么有点困惑？如果你回答了一个问题，那么就会出现第三个问题。当你转到下一页并回到上一页时，你会遇到一个问题，即问题2不可见，因为它没有被选中，但问题3可见。如果我对这一点的理解是正确的，你就不能简单地回答吗？”始终确保隐藏第三个问题，如果用户已经回答了，也许可以添加一个名为“显示所有问题”的按钮？听起来您需要使用数据绑定库（如Vue.js）根据表单模型的整体状态切换可见性。