如何將這兩個對象與JavaScript關聯？

Question

我有一個圖像地圖和一些複選框的一些地區。每個區域都有一個對應的複選框，我怎樣才能做到這一點，當點擊一個區域時，相應的複選框被勾選？

圖像映射：

<%= image_tag("maps/mainmap.png", :width => "450", :height => "450", :class => "map", :usemap => "#mainmap", :alt => "") %> 

    <map name="mainmap"> 
    <area id="area-42" shape="poly" 
     coords="158,43,152,49,164,86,165,112,153,153,139,169,145,171,161,176,236,201,241,202,251,166,253,142,257,132,294,102,269,85,240,68,227,53,213,28,202,27" alt="North" 
     data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}' 
     onmouseover="document.body.style.cursor='pointer'" 
     onmouseout="document.body.style.cursor='default'" > 

    <area id="area-43" shape="poly" 
     coords="296,103,258,133,254,143,252,166,242,203,263,209,272,204,322,226,340,250,360,241,356,230,357,222,378,214,395,195,394,188" alt="" 
     data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}' 
     onmouseover="document.body.style.cursor='pointer'" 
     onmouseout="document.body.style.cursor='default'" >  
    </map>  

複選框：

<fieldset class="filter_form_fieldset areas"> 
    <% Area.all.each do |a| %> 
    <p class="area_check"><%= check_box_tag 'areas[]', a.id, false, :id => "area-#{a.id}" %> 
    <label for="area-<%= a.id %>"><p1><%= a.name %></p1></label></p> 
    <% end %> 
</fieldset> 

這會產生這樣：

<img alt="" class="map" height="450" src="/assets/maps/mainmap.png" usemap="#mainmap" width="450" /> 

    <map name="mainmap"> 
    <area id="area-41" shape="poly" 
     coords="158,43,152,49,164,86,165,112,153,153,139,169,145,171,161,176,236,201,241,202,251,166,253,142,257,132,294,102,269,85,240,68,227,53,213,28,202,27" alt="North" 
     data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}' 
     onmouseover="document.body.style.cursor='pointer'" 
     onmouseout="document.body.style.cursor='default'" > 

    <area id="area-42" shape="poly" 
     coords="296,103,258,133,254,143,252,166,242,203,263,209,272,204,322,226,340,250,360,241,356,230,357,222,378,214,395,195,394,188" alt="" 
     data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}' 
     onmouseover="document.body.style.cursor='pointer'" 
     onmouseout="document.body.style.cursor='default'" >  
    </map> 

    <fieldset class="filter_form_fieldset areas"> 
     <p class="area_check"><input id="area-41" name="areas[]" type="checkbox" value="41" /> 
     <label for="area-41"><p1>Chinatown</p1></label></p> 
     <p class="area_check"><input id="area-42" name="areas[]" type="checkbox" value="42" /> 
     <label for="area-48"><p1>Village</p1></label></p> 
    </fieldset> 

我認爲Java類的該位cript可能會將這兩者聯繫起來，但它不起作用，關於我哪裏出錯的想法？

$(function() { 
    $('area').click(function(){ 
     var name = $(this).attr('id'); 
     var $checkbox = $('[id=' + id + ']'); 
     $checkbox.attr('checked', !$checkbox.attr('checked')); 
    });  
    }); 

非常感謝您的幫助！

Answer 1

您使用值在<area>標籤和複選框中相同的ID。這將永遠不會工作。您在獲取$checkbox變量的過程中也遇到了一些錯誤。

我改變了<area>標籤使用數據值和改變了代碼檢索數據的價值和現在的工作。你可以在這裏看到它的行動：http://jsfiddle.net/jfriend00/ndwjC/。

因爲我們沒有實際的形象，一個有猜測應該點擊哪裏找熱點，但是當你發現一個，就會切換的複選框。

HTML：

<img alt="" class="map" height="450" src="/assets/maps/mainmap.png" usemap="#mainmap" width="450" /> 

    <map name="mainmap"> 
    <area data-areanum="area-41" shape="poly" 
     coords="158,43,152,49,164,86,165,112,153,153,139,169,145,171,161,176,236,201,241,202,251,166,253,142,257,132,294,102,269,85,240,68,227,53,213,28,202,27" alt="North" 
     data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}' 
     onmouseover="document.body.style.cursor='pointer'" 
     onmouseout="document.body.style.cursor='default'" > 

    <area data-areanum="area-42" shape="poly" 
     coords="296,103,258,133,254,143,252,166,242,203,263,209,272,204,322,226,340,250,360,241,356,230,357,222,378,214,395,195,394,188" alt="" 
     data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}' 
     onmouseover="document.body.style.cursor='pointer'" 
     onmouseout="document.body.style.cursor='default'" >  
    </map> 

    <fieldset class="filter_form_fieldset areas"> 
     <p class="area_check"><input id="area-41" name="areas[]" type="checkbox" value="41" /> 
     <label for="area-41"><p1>Chinatown</p1></label></p> 
     <p class="area_check"><input id="area-42" name="areas[]" type="checkbox" value="42" /> 
     <label for="area-48"><p1>Village</p1></label></p> 
    </fieldset> 

的Javascript：

$(function() { 
    $('area').click(function(){ 
     var name = $(this).data("areanum"); 
     var $checkbox = $('#' + name); 
     $checkbox.attr('checked', !$checkbox.attr('checked')); 
    });  
    }); 

附：如果您使用的是最新的jQuery的版本，你應該使用.prop()改變複選框，而不是.attr()。