如何根據顯示的結果更改背景圖像？

我有每個場館都屬於一個區域，一個區域有許多場館的場地和地區的表。如何根據顯示的結果更改背景圖像？

場館索引頁中顯示所有會場的記錄爲諧音，我有一組複選框，以過濾由他們在什麼區域中顯示的場館。

我也有一個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等

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

來源

2011-03-05 Dave

它似乎是控制器的工作。檢查area_id內部並將一個變量傳遞給視圖以顯示適當的圖片。 – apneadiving 2011-03-05 22:29:10

@apneadiving感謝有一看，我超級新本，你知道的任何教程或資源，我可以看看，以幫助我嗎？ – Dave 2011-03-05 22:51:07

聽起來像是你可能希望背景圖像動態更新時複選框被用戶改變了嗎？如果是這樣，最好的辦法是使用CSS來設置map_container背景圖像的URL，基於一些其他類：

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

在JavaScript中，附加類map_container_map1如果所有的複選框被用於區1套。

你應該寫這就是所謂的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'); 
}

這應該有希望讓你開始。

來源

2011-03-06 00:16:16 aceofspades

感謝您的答案，它的工作還沒有結束，但我會嘗試玩，看看它非常感謝！ – Dave 2011-03-06 22:19:04

如何根據顯示的結果更改背景圖像？

回答

相關問題