javascript - 如何根据页面上存在的元素跳过显示某些内容或不使用 javascript 或做出反应？

Question

我必须在页面上显示四个元素的内容。如果页面上存在该元素，那么我会显示它的内容。如果不跳过显示不存在的元素的内容并继续显示页面上下一个元素的内容。

为了进一步解释，考虑我有四个元素，即标题（div 元素）、菜单（svg 元素）、地图（图像元素）、设置（标题 h4 元素）。

在这些元素中，有时只有地图和设置元素不可见。

我把它们放在一个可变的对象数组中，定义如下，

const data = [{
    id: '2',
    val: 'value1',
  },
  {
    id: '4',
    val: 'value2',
  },
  {
    id: '5',
    val: 'value3',
    element: '.some_class image',
  }
  {
    id: '5',
    val: 'value3',
    element: '.class2 h4',
  }
]

这些元素的内容显示在带有上一个和下一个箭头的 div 中。

当我单击页面上的开始按钮时，元素的内容开始显示，单击下一步按钮将我带到下一个按钮的内容，在这种情况下为标题，单击下一步按钮将我带到菜单，然后到设置，最后到设置。

同样，单击 prev 按钮将我从最后一个到第一个内容。

以下是处理这些的方法，

this.state.count is undefined initially.

handle_start = () => {
    this.setState({count: 0});
}

handle_next = () => {
    const next = this.state.count + 1 >= data.length ? 0 : this.state.count 
    + 1;
    this.setState({count: next});
}

handle_previous = () => {
    this.setState({count: this.state.count - 1});
}

现在我如何跳过显示元素地图的内容和基于元素存在与否的设置？

我该怎么做。有人可以帮我解决这个问题。谢谢。

标签： javascript