Question

我有一个应用程序显示场地列表，其中每个场地属于一个区域。场地可以根据它们所在的区域进行过滤。我希望屏幕在中心分开，显示场地局部在左侧，并在右侧有一个“手绘”地图。如何根据显示的场地更改右侧地图div中显示的图像？

我希望默认为缩小的地图，显示所有区域但是当显示的所有场地都具有相同的area_id编号时，我希望地图图像更改为该区域的放大详细地图。

有点像这样：

如果显示所有场地area_id = 1则显示该区域图像
或者如果area_id = 2，则显示该区域图像
否则显示另一个缩小的图像

我最终希望每个场地在地图上都有自己的图标，并在地图div中放置绝对定位。

我有大约2个月的编程经验，也许认为这需要在javascript或jquery中完成（我对此一无所知）但不确定，非常感谢任何帮助！

Answer 1

将区号用作元素的类，并在CSS中为每个类设置背景图像。

<div class="area_id_1"></div>

的CSS：

.area_id_1 {
  background-image:url(...)
}

Answer 2

我在场地部分html.erb文件中用这个jQuery管理了这个：

<script type="text/javascript">
  document.getElementById("venue_map_icon_<%= venue.id %>").style.left= "<%= venue.iconleftpx %>px";
  document.getElementById("venue_map_icon_<%= venue.id %>").style.top= "<%= venue.icontoppx %>px";
</script>

我在场地表中添加了iconleftpx：integer和icontoppx：integer字段，填充了jQuery代码调用的绝对定位的顶部和左侧值。

如何根据显示的结果更改div背景图像？

2 个答案: