如何用javascript链接这两个对象?
我有图像地图的一些区域和一些复选框。每个区域都有一个对应的复选框,当单击某个区域时,如何使其成为选中相应复选框 图像映射:如何用javascript链接这两个对象?,javascript,ruby-on-rails,imagemap,Javascript,Ruby On Rails,Imagemap,我有图像地图的一些区域和一些复选框。每个区域都有一个对应的复选框,当单击某个区域时,如何使其成为选中相应复选框 图像映射: 非常感谢您的帮助 您正在中使用相同的id值 由于我们没有实际的图像,因此必须猜测在何处单击以查找热点,但当您找到热点时,它会切换一个复选框 HTML: 注意:如果您使用的是最新版本的jQuery,您可能应该使用.prop()来更改复选框,而不是。attr()是否可以通过在javascript函数中放置一条警报语句来检查是否发生了单击尝试调试javascript以查看单击函数
非常感谢您的帮助 您正在
中使用相同的id值
由于我们没有实际的图像,因此必须猜测在何处单击以查找热点,但当您找到热点时,它会切换一个复选框
HTML:
注意:如果您使用的是最新版本的jQuery,您可能应该使用.prop()
来更改复选框,而不是。attr()
是否可以通过在javascript函数中放置一条警报语句来检查是否发生了单击尝试调试javascript以查看单击函数内部发生的情况(或者如果它被调用的话)。如果你使用的是Firefox,试试firebug。Chrome和Safari都内置了调试器。非常感谢你!在这个问题上坚持太久了,这是一种享受,再次感谢!
<%= 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>
$(function() {
$('area').click(function(){
var name = $(this).attr('id');
var $checkbox = $('[id=' + id + ']');
$checkbox.attr('checked', !$checkbox.attr('checked'));
});
});
<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'));
});
});