Javascript CSS巨大的网格问题

我使用CSS网格作为时间轴。网格产生大约1300个div，这对性能非常不利

我需要让这些单元格中的每一个都可以点击，并在悬停时显示不同的颜色。如果不渲染所有1300个div，我无法找到任何方法来设置空节点的样式或与它们交互

我能做什么

正如所建议的，最好的方法是检测鼠标点击并动态添加项目。您可以通过将值指定给item_width和item_height来自定义项目的宽度和高度

可变项目宽度=40； 变量项_高度=40； 增加的风险值_项=[]； $function{ $'.grid'。单击，函数E{ var x=e.pageX-$this.offset.left； var y=e.pageY-$this.offset.top； 变量项=$； var left=数学地板/项目宽度*项目宽度； var top=数学地板/项目高度*项目高度； 变量位置={'left'：left，'top'：top}； var index=added_items.findIndexp=>p.left==position.left&&p.top==position.top；

---

如果索引您可以将列类添加到eventHandler中，相同的类将以相同的方式悬停或单击。。 此外，1300个div确实会降低页面的性能。为此，您可以研究无限滚动或类似的方法

---

使用JS和坐标知道你在网格中的位置为什么需要1300个div？只需使用一个主div和一个正确重复的背景图像来显示你的网格，然后使用Javascript确定有人在你的div中单击的位置。然后仅为你知道用户要高亮显示的区域创建一个高亮显示div，使用CSS宽度/高度t调整大小以适应网格，CSS上/左定位以确保它位于相对于主div的正确位置。您也可以使用D3执行类似操作。也许您可以包含网格的代码。对于不同颜色的内容，您需要javascript提供一个随机十六进制值，然后使用事件处理程序进行更改ge悬停单元格的颜色。谢谢你的评论。我通过在悬停上使用重复背景和动态注入元素解决了这个问题。