如何根據顯示的記錄更改圖像和JS？

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或者它們的area_id均爲2，然後顯示map2.png等，並更改JavaScript以獲取來自venue.iconleftpx2和venue.icontoppx2的頂部和左側值哪些不存在），以便圖標被重新定位以與新的地圖圖像相匹配。

感謝您的幫助，非常感謝！

Answer 1

我管理這與場地部分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：整數和icontoppx：整數字段到場地表中，填充jQuery代碼調用的絕對定位的頂部和左側值。

Answer 2

使用CSS背景。讓你的類名相同，您的內容包裝領域：

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

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