如何用javascript链接这两个对象

How can I link these two object with javascript?

本文关键字：两个 对象 何用 javascript 链接      更新时间：2023-09-26

我有一些图像映射区域和一些复选框。每个区域都有一个相应的复选框，我如何使其在单击某个区域时相应的复选复选框被勾选？

图像地图：

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

我以为这段javascript可能会将两者联系起来，但它不起作用，有什么想法可以说明我哪里错了吗？

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

非常感谢您的帮助！

您在<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()来更改复选框。

相关文章：