Question

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

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

我还有一个div（map_container），它显示了屏幕右侧所有区域的地图.png图像。

场地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>

如何检查所显示的所有场地是否具有相同的area_id，以及它们是否在地图div中显示不同的地图图像？因此，如果所有场地的area_id为1，则显示map1.png，或者如果它们都具有2的area_id，则显示map2.png等。

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

Answer 1

听起来您可能希望在用户更改复选框时动态更新背景图像？如果是这样，最好的办法是使用CSS在map_container上设置背景图像URL，基于其他一些类：

.map_container_map1 {
  background-image: url('/images/map1.png')
}

在javascript中，如果为区域1设置了所有复选框，则附加班级map_container_map1。

您应该编写一个在docReady上调用的javascript函数，以及每次单击一个复选框时。在jQuery中这样的东西：

// docReady
$(function() {
  updateMap();
}

$(document).delegate('checkbox[name|="areas"', 'change', function(event) {
  updateMap();
});

function updateMap() {
  // Loop through all the checkboxes, check their values to see if they're the same
  $('checkbox[name|="areas"').each(function() {
    ...
  });
  var map = $j('.map_container');
  map.removeClass('map_container_area1 map_container_area2');
  if (area1)
    $j('.map_container').addClass('map_container_area1');
  else if (area2)
    $j('.map_container').addClass('map_container_area2');
}

这应该可以让你开始。

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

1 个答案: