Как я могу изменить изображение и JS в зависимости от того, какие записи отображаются?

Question

У меня есть таблица мест и областей, где каждое место принадлежит области, и у области есть много мест.

На странице индекса мест отображаются все записи места проведения в качестве частичных, и у меня есть набор флажков для фильтрации мест, показанных по тому, в какой области они находятся.

У меня также есть div (map_container), который показывает map.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>

Я хотел бы иметь возможность изменять изображение карты в зависимости от того, какие результаты отображаются, и изменять координаты значка в соответствии с новым изображением, поэтому, если отображаются все места на севере, отображается раздел карты. более детальное изображение карты севера.

Как можно было бы проверить, все ли отображаемые объекты имеют одинаковый area_id и отображают ли они другое изображение карты в карте div? Таким образом, если для всех мест указание area_id равно 1, тогда отобразите map1.png, или если у всех них указывается area_id, равное 2, тогда отобразите map2.png и т. Д., А также измените JavaScript, чтобы он брал верхнее и левое значения, скажем, из venue.iconleftpx2 и venue.icontoppx2 ( который еще не существует), так что значок перемещается в соответствии с новым изображением карты.

Спасибо за любую помощь, она очень ценится!

Answer 1

Я справился с этим битом jQuery в частичном файле html.erb места проведения:

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

Answer 2

Используйте фоны CSS.Сделайте так, чтобы имена ваших классов совпадали с областями в вашей обертке содержимого:

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

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