一次只选择一个区域答案

【问题标题】：Select only one area at a time一次只选择一个区域
【发布时间】：2017-06-19 07:01:17
【问题描述】：

我有一张图片，我想在其中选择区域，但如果您点击一个区域，则需要“取消点击”前一个区域。

$(document).ready(function() {
    $(document).mousemove(function(event){
        $("#coor").text(event.pageX + ", " + event.pageY);
    });

    $('.map').maphilight({
        fillColor: '008800'
    });

    $('.mapping').click(function(e) {
        $('.mapping').not(this).attr('checked', false);
        e.preventDefault();
        var data = $(this).mouseout().data('maphilight') || {};
        data.alwaysOn = !data.alwaysOn;
        $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
    });
});

<div id="links">
    <img src="img/hiveplattegrond.png" width="726" height="714" alt="Plattegrond Hive" id="afbeeldingachtergrond" usemap="#hivemap" class="map" s>
    <map name="hivemap">
        <area shape="rect" coords="116,7,190,137" alt="Multimediaruimte" value="Lokaal_Multimedia_01" class="mapping" id="Lokaal_Multimedia_01">
        <area shape="rect" coords="187,7,267,73" alt="A105F" value="Lokaal_Studeren_01" class="mapping">
        <area shape="rect" coords="187,74, 267,137" alt="A105E" value="Lokaal_Studeren_03" class="mapping">
        <area shape="rect" coords="268,7,347,73" alt="lokaalzondernaam" value="Lokaal_Studeren_02" class="mapping">
        <area shape="rect" coords="268,74, 347, 137" alt="A105G" value="Lokaal_Studeren_04" class="mapping">
        <area shape="rect" coords="572, 445, 650, 523" alt="brainstormruimte" value="Lokaal_Brainstorm_01" class="mapping">
        <area shape="rect" coords="311,610,403,705" alt="groepsruimte1" value="Lokaal_Studeren_05" class="mapping">
        <area shape="rect" coords="404,610,495,705" alt="groepsruimte2" value="Lokaal_Studeren_06" class="mapping">
    </map>
</div>

【问题讨论】：

请描述你的意思unclicked？为什么不能先重置所有区域的所有先前更改，而不是对当前区域执行正常操作？
是的，我需要将值从该区域中取出，但一次只能取出一个；

标签： javascript jquery html maphilight

【解决方案1】：

只需从元素中删除 checked 属性：

 $('.mappings').click(function (e) {
      $('.mapping').not(this).removeAttr('checked').prop('checked', false);
      e.preventDefault();
      [...]
 });

【讨论】：

同样的结果，我仍然可以选择多个区域。

【解决方案2】：

$('.mapping').data('maphilight', { alwaysOn: false }).trigger('alwaysOn.maphilight');
$(this).data('maphilight', {alwaysOn: true}).trigger('alwaysOn.maphilight');

【讨论】：