javascript - 如何使用 CSS/Javascript 在不同位置添加超过 100 个可点击的图像？

Question

我是 HTML/CSS/Javascript 的初学者。但是我确实有 Android native UI、布局、适配器、 View 等方面的经验。

所以我有一个使用相同图像/图标的 field 。现在我需要相对于 field 定位。这基本上是您的传统座位图 UI。

因此，例如，硬编码的 css 代码如下所示:

.parent {
position: relative;
top: 0;
left: 0;

}
.image1 {
height:auto;
width: auto;
max-width: 1080px;
max-height: 1080px;
}
.image2 {
position: absolute;
top: 30px;
left: 70px;
height: auto; 
width: auto; 
max-width: 60px; 
max-height: 60px;
}
.image3 {
position: absolute;
top: 30px;
left: 140px;
height: auto; 
width: auto; 
max-width: 60px; 
max-height: 60px;
}

....


.image100{
position: absolute;
top: 1000px;
left: 1000px;
height: auto; 
width: auto; 
max-width: 60px; 
max-height: 60px;
}

这里 image1 是背景(会场)，image2-100 就是会场不同位置和不同方向的所有不同座位。进行这种硬编码似乎是一种非常不直观的方法。

但是，我无法动态加载它，因为假设我有 10 个不同的 field ，它们都会有不同的布局，然后每个座位都需要以不同的方式定位。

我可以使用任何类型的拖放绘图应用程序吗？基本上我只需要一个 UI 可以处理 ~100 个自定义图标席位和 100 个唯一 ID 而没有性能问题(这取决于服务器，但我不想以服务器处理的繁重方式对其进行编码)。

我只是使用这些图片让它们在点击时返回一个 ID，我会将其发布到我的服务器并“预订”它。

Answer 1

我的建议:

让您的服务器提供具有唯一 ID 的席位列表，例如:

[
    { id: 1, image: 'url_to_the_image', coordinates: { x: 1, y 1 }},
    { id: 2, image: 'url_to_the_image', coordinates: { x: 10, y 10 }},
    { 
        // more seats 
    }
]

然后你可以有这样的 HTML:

<div class="container"></div>

CSS:

.container {
    background: url(../yourVenueMapImageUrl);
}

然后，使用 javascript，运行您的 JSON 并将您的座位附加为 .container 中的 divs。添加 ID 作为数据属性，以及一个 .seat 类。您还可以使用 coordinates 属性设置 style 以将座位放置在相对于 field map 的特定位置。最后，添加一个事件处理程序，监听对具有该 .seat 类的元素的点击，并获取 ID 属性。为了提高性能，您还可以让一个事件处理程序监听对 .container 中任何元素的点击。

希望对您有所帮助。