0

我第一次使用<map>and <area>，当弹出窗口打开时，我需要突出显示某些区域。如果该区域空闲，则突出显示颜色应为绿色，否则为红色。

为了突出显示我正在使用jQuery maphilight的区域，它做得很好。问题是，当我第一次打开该区域可用的弹出窗口时，突出显示的区域是绿色的，但是当我关闭弹出窗口并且打开另一个不可用的弹出窗口时，它不会改变颜色.

当按下按钮时，它会调用一个打开引导弹出窗口的 javascript 函数。在打开引导弹出窗口的函数中，我可以createImageMapAreas()动态创建元素并setMapAreasHighlights()设置 jQuery maphilight 属性。这是代码：

//firstly I call this functions to create the elements....
function createImageMapAreas(model) {
    var areas = $('area');
    if (areas.length > 0) {
        areas.each(function () {
            $(this).remove();
        });
    }
    var img = $('img');
    if (img.length > 0) {
        img.each(function () {
            if ($(this).attr('id') == 'buildingMapImg')
                $(this).remove();
        });
    }
    var map = $('map');
    if (map.length > 0) {
        map.each(function () {
            $(this).remove();
        });
    }
    var div = $("#BuildingMapModal #imgDiv");

    var newImg = new Image();
    newImg.id = 'buildingMapImg';
    newImg.useMap = '#buildingMap'
    newImg.setAttribute('class', 'mapImgSize mx-auto d-block mapImgSize map');
    div.append(newImg);

    var newMap = document.createElement('MAP');
    newMap.name = 'buildingMap';
    newMap.id = 'buildingMap';
    div.append(newMap);

    var newAreas = document.createElement("AREA");
    newAreas.target = '_self';
    newAreas.shape = 'poly';
    newAreas.coords = model.ShapeCoords;
    if (model.a== 1) {
        newAreas.setAttribute('data-maphilight', '{"fill":true, "fillColor":"008000", "fillOpacity": 0.5, "stroke":true, "strokeColor":"013220"}')
    }
    else {
        newAreas.setAttribute('data-maphilight', '{"fill":true, "fillColor":"FF0000", "fillOpacity": 0.5, "stroke":true, "strokeColor":""}')
    }
    newMap.append(newAreas);
}

//after that I call this
function setMapAreasHighlights(model) {
    $('map').imageMapResize();

    var data = $('area').data('maphilight') || {};
    data.alwaysOn = !data.alwaysOn;
    console.log(data);
    $('#buildingMapImg').maphilight();
    //$('area').data('maphilight', data).trigger('alwaysOn.maphilight');
    $('area').each(function () {
        $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
    })
}

我也检查了这个，但它对我没有帮助。

我不知道有什么问题以及为什么它不改变颜色。任何建议如何解决这个问题？

4

0 回答 0