Как я могу изменить фоновое изображение в зависимости от того, какие результаты отображаются? - PullRequest
Новая
       3

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

0 голосов
/ 06 марта 2011

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

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

У меня также есть div (map_container), который показывает map.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 или если для всех площадок указана area_id, равная 2, отобразите map2.png и т. Д.

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

1 Ответ

1 голос
/ 06 марта 2011

Звучит так, как будто вы хотите, чтобы фоновое изображение динамически обновлялось при смене флажков пользователем? Если это так, лучше всего использовать CSS для установки URL-адреса фонового изображения на map_container на основе какого-либо другого класса: 

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

В javascript присоедините класс map_container_map1, если все флажки установлены для области 1.

Вам следует написать функцию javascript, которая вызывается в docReady, а также всякий раз, когда устанавливается флажок. Примерно так, в 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');
}

Надеюсь, это поможет вам начать.

...