어떻게이 두 개체를 자바 스크립트와 연결할 수 있습니까?

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> 

이이 생산 : 내가 javas의이 비트를 생각

<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> 

cript는 두 개를 연결할 수 있지만 작동하지 않습니다. 어디에서 잘못 될지 생각해보십시오.

어떤 도움을 주셔서 감사합니다.

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> 

자바 스크립트 :

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

P.S. 최근 버전의 jQuery를 사용하는 경우 .attr() 대신 체크 박스를 변경하려면 .prop()을 사용해야합니다.