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

Question

У меня есть приложение, показывающее список мест в качестве частичных, где каждое место принадлежит области. Места могут быть отфильтрованы по области, в которой они находятся. Мне бы хотелось, чтобы экран был разделен по центру, показывая части места внизу слева и нарисовав карту «рисованной» справа. Как я могу изменить изображение, отображаемое в правой части карты, в зависимости от того, какие места отображаются?

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

Вот так:

, если отображаются все объекты area_id = 1, отобразить изображение этой области
или если area_id = 2, отобразите изображение этой области
еще показать это другое увеличенное изображение

В конечном итоге я бы хотел, чтобы у каждого объекта была своя собственная иконка на карте с абсолютным позиционированием внутри карты div.

У меня около 2 месяцев опыта программирования, и, возможно, я думаю, что это нужно сделать в javascript или jquery (о которых я ничего не знаю), но не уверен, что любая помощь очень ценится!

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 для каждого класса.

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

CSS:

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