如何链接这两个对象(图像映射形状和复选框）

How can I link these two objects (imagemap shape and checkbox)?

本文关键字：映射 图像 复选框 对象 何链接 链接 两个      更新时间：2023-09-26

我有一个形状的imagemap集合和一堆复选框，如何使其在单击形状时选中相应的复选框，反之亦然？

图像地图：

<div class="map_container">
  <%= image_tag("maps/mainmap.png", :width => "450", :height => "450", :class => "map", :usemap => "#mainmap", :alt => "") %>
  <map name="mainmap">
    <area id="north" 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="south" shape="poly" 
      coords="38,288,16,361,13,374,18,380,69,403,183,408,217,390,199,352,188,330,177,321,169,317,40,284" alt=""
      data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}'
      onmouseover="document.body.style.cursor='pointer'" 
      onmouseout="document.body.style.cursor='default'" >
  </map>              
</div>

复选框：

<div class="filter_options_container">
  <%= form_tag '', :method => :get, :id => 'filter_form' do %>
    <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>
    <div class="filter_form_button">
      <p2><input type="submit" value="Filter"/></p2>
    </div>
  <% end %>
</div>

这给出了以下输出：

<div class="filter_options_container">
  <form accept-charset="UTF-8" action="" id="filter_form" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>        
    <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>North</p1></label></p>
        <p class="area_check"><input id="area-42" name="areas[]" type="checkbox" value="42" />
        <label for="area-42"><p1>South</p1></label></p>
    </fieldset>
    <div class="filter_form_button">
      <p2><input type="submit" value="Filter"/></p2>
    </div>
</form></div>

非常感谢您的帮助！

您可能希望在<area>和复选框之间提供某种"链接"。将配对匹配在一起的某些属性。现在，你的<area>有"north"answers"south"的alt标签，但复选框有看起来不相关的id 41和42。把它们匹配起来怎么样，这样你就不必做一堆遍历了，例如：

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

会很好地与html类似：

North<input name="north" type="checkbox" />
South<input name="south" type="checkbox" />
...
  <area shape="rect" coords="137,17,285,120" href="#" alt="north">
  <area shape="rect" coords="152,165,292,327" href="#" alt="south">

jsFiddle

编辑：关键只是将<area> s与<input> s匹配，理想情况下，您可以制作html，以便匹配对具有共同点，但如果最坏的情况发生，您有两种后备方法。

1）顺序：如果<area>与复选框的顺序相同，并且每个复选框都有一个合作伙伴，则可以依赖该对应关系：

$('area').click(function(i){
    var name = $(this).attr('id');
    var $checkbox = $('.areas input[type="checkbox"]').eq(i);
    $checkbox.attr('checked', !$checkbox.attr('checked'));
});

这将使用您单击的索引"i"来选中同一索引的复选框。

2）直接映射，您可以将其写入javascript:

var CBids = {
    "north" : "area-41"
    "south" : "area-41"
};
$('area').click(function(){
    var name = $(this).attr('id');
    var $checkbox = $('#' + CBids[name] );
    $checkbox.attr('checked', !$checkbox.attr('checked'));
});
相关文章：