如何制作一系列元素，可以检查它之前的元素是否处于活动状态？

Question

用文字解释这是非常复杂的，但我正在尝试建立一个系统，其中我有一个元素（图像中的数字1）源于另一个元素。在某些情况下，如元素二，它可能源于两个方向。我希望能够激活这些元素，但仅当激活链接到它的元素时。

示例：

现在可以激活元素2右侧的元素，但如果元素2未激活，则必须首先激活元素1。

我想过使用数据属性并给它们一个数字并检查一个数字是否有效，但问题是有时它分为两个，三个或更多。有什么办法可以实现吗？任何建议都会很棒我只是无法想出一种检测这种情况的方法，提前谢谢！

其他信息：

基本思想是在激活该元素之前必须有一个活动元素（深蓝色）。在下图中，您可以看到两种不同的方式到达元素A，同时查看深蓝色线条，您可以看到其他元素现在可用于激活。

Answer 1

我建议在页面加载时构建图表，然后在页面的生命周期中使用此图表来跟踪已激活的内容等。

图表的基本节点如下所示：

var node = {
   adjacent : [], // list of adjacent nodes (depending on your use case, you might not need this
   previous : prevNode, // previous node (for node2, it is node1)
   isActive : false,
   activate : function(){ 
       // code that checks previous and activates the current node
       // if previous is not active, it can call previous.activate()
       // which will then activate prevNode and its dependencies
   }
}