如何使此区域映射/复选框与JQuery双向工作?(包括JsFiddle)

我的应用程序使用表格按区域筛选场地结果。表格中每个区域都有一个复选框，可以选中多个区域。然后，页面只返回选中区域中的场馆。

该页面还有一个.png的城镇地图图像，显示了所有不同的区域，每个区域都是可点击的，并与过滤器表单中的区域复选框相对应。map.png是包含每个区域多边形的图像地图的背景。

此javascript:

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

将地图上的区域链接到相应的复选框。因此，如果用户在地图上选择了北部区域，则会选中北部区域复选框。但是，如果用户选中北部区域复选框，则不会选中地图上的北部区域。

因此，如果地图上的区域被点击，它会选中复选框，但如果复选框被点击，地图上的地区什么也不做。

我如何使这种交互双向工作？

编辑为一个区域及其相关复选框生成的html

地图上的区域

<div class="map_container">
  <img alt="" class="map" height="450" src="/assets/maps/mainmap.png" usemap="#mainmap" width="450" />
  <map name="mainmap">
    <area id="north" data-areanum="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'" >
  </map>              
</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-42" name="areas[]" type="checkbox" value="42" />
        <label for="area-42"><p1>North</p1></label></p>
    </fieldset>
    <div class="filter_form_button">
      <p2><input type="submit" value="Show me"/></p2>
    </div>
</form></div>

jsfiddle这是我的应用程序中发生的事情的迷你版本

http://jsfiddle.net/dRz9U/

很抱歉，如果这个问题有点令人困惑，我们将非常感谢您的帮助！

$(function() {
    var $area = $('area');
    $area.click(function(){
        var $checkbox = $('#' + $(this).data("areanum"));
        $checkbox.attr('checked', !$checkbox.attr('checked')).button('refresh');
    });
    $('input[type="checkbox"]').click(function () {
        $area.filter('[name="' + this.id + '"]').trigger('click');
    }); 
});

这会注册对checkbox元素的单击，找到相应的area元素并触发对该元素的单击（因此，基本上，此代码模拟在单击checkbox元素时对图像映射的单击）。

如果您发现自己多次并排使用同一选择器，那么可以将函数调用链接到该选择器，以避免选择DOM元素的开销。

更新

在审查了你的jsfiddle之后，这里是我提出的解决方案：

$(function() {
    var $area = $('area');
    $area.click(function(){
        var $checkbox = $('#' + $(this).data("areanum"));
        $checkbox.attr('checked', !$checkbox.attr('checked')).button('refresh');
    });
    //instead of binding to the input elements, this binds to their associated label elements
    $('label').click(function () {
        //trigger a click on the area element that is associated with this label element (the reference is in the `for` attribute)
        $area.filter('[data-areanum="' + $(this).attr('for') + '"]').trigger('click');
        //now stop this event handler from bubbling over to the input element (this is done because if we let the event get to the input element then it will un-hilight the label element)
        return false;
    });
});

下面是一个演示：http://jsfiddle.net/dRz9U/1/

您需要一个复选框单击事件处理程序，它将执行与现有处理程序相反的操作。

你的意思是让它们保持同步吗？像这样？

http://jsfiddle.net/eiu165/s24yW/

相关内容

最新更新

热门标签：