如何创建一个元素序列，以检查它之前的元素是否处于活动状态？

Question

这很难用文字来解释，但我正在尝试建立一个系统，其中我有一个元素(图像中的第一个元素)，它源于另一个元素。在某些情况下，就像第二元素一样，它可能有两个方向。我希望能够激活这些元素，但只有在链接到它的元素被激活时才能激活。

​

​

示例：

元素二右边的元素现在可以被激活了，但是如果元素二没有激活，我必须先激活元素一。

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

其他信息：

基本的想法是，在激活该元素之前，必须有一个可触摸的元素处于活动状态(深蓝色)。在下图中，你可以看到两种不同的到达元素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
   }
}