一次僅選擇一個區域

Question

我有一個要在其中選擇區域的圖像，但是如果您單擊某個區域，則需要“取消單擊”先前的區域。

$(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>

Answer 1

只需從元素中刪除checked屬性：

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

Answer 2

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