Question

我有一个场地和区域的桌子，每个场地属于一个区域，一个区域有很多场地。

场地索引页面将所有场地记录显示为局部区域，我有一组复选框，用于过滤场所所显示的场地。

我还有一个div（map_container），它显示了屏幕右侧所有区域的地图.png图像。场地通过绝对定位在地图上放置一个图标：

<script>
  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>

场地index.html.erb

<div class="map_container">
</div>

<div class="filter_options_container">
  <form class="form">          
    <fieldset class="filter_form_fieldset areas">
      <% Area.all.each do |a| %>
      <%= check_box_tag 'areas[]', a.id, false, :id => "area-#{a.id}" %>
        <label for="area-<%= a.id %>"><p1><%= a.name %></p1></label>
      <% end %>
    </fieldset>

    <div class="form_filter_button">
      <p2><input type="submit" value="Filter"/></p2>
    </div>
  </form>
</div>

<div class="venue_partials_container">
  <%= render :partial => 'venue', :collection => @venues %>      
  <div class="clearall"></div>
</div>

<div class="clearall"></div>

我希望能够根据显示的结果更改地图图像并更改图标的坐标以匹配新图像，因此如果显示北部的所有场地，则地图div显示更详细的北方地图图片。

如何检查所显示的所有场地是否具有相同的area_id，以及它们是否在地图div中显示不同的地图图像？因此，如果所有场地的area_id为1，则显示map1.png或者如果它们都具有2的area_id，则显示map2.png等，并且还更改JavaScript以获取来自venue.iconleftpx2和venue.icontoppx2的顶部和左侧值（它还没有存在），以便重新定位图标以匹配新的地图图像。

感谢您的帮助，非常感谢！

Answer 1

使用CSS背景。使您的类名与内容包装器上的区域相同：

.area1 {
     background-image:url(../images/pictureA.png)
}

.area2 {
     background-image:url(../images/pictureB.png)
}

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代码调用的绝对定位的顶部和左侧值。

如何根据显示的记录更改图像和JS？

2 个答案: