我遇到jquery插件maphilight的问题。我的代码如下-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery maphilight documentation</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.maphilight.js"></script>
<script type="text/javascript">
$(function () {
var num = 0;
addElement = function addElement(str) {
var ni = document.getElementById('MDI');
ni.innerHTML = "";
var newitem = document.createElement('img');
var newmap = document.createElement('map');
var newarea = document.createElement('area');
var imgIdName = 'myimg' + num;
newarea.href = 'https://www.mapsofworld.com/usa/usa-state-and-capital-map.html';
newarea.shape = 'circle';
newarea.coords = "172,233,11"
newmap.appendChild(newarea);
newmap.setAttribute('name', 'mymap' + num, 0);
newitem.src = 'Images/' + str + '.PNG';
newitem.useMap = '#' + 'mymap' + num;
newitem.id = imgIdName;
newitem.className = 'clMapState' + num;
ni.appendChild(newitem);
ni.appendChild(newmap);
$('.clMapState' + num).maphilight();
$('.clMapState' + num).data('maphilight', { 'alwaysOn': true, fillColor: 'DC143C' });
num++;
return false;
}
$('.map').maphilight();
});
</script>
</head>
<body>
<table class="table">
<tbody>
<tr>
<td>
<img src="Images/US_map.PNG" class="map" usemap="#simple" id="usMapId2">
<map name="simple">
<area data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"0000ff","fillOpacity":0.6}' onclick="addElement('ID')" shape="poly" coords="171,180,263,197,273,143,245,143,234,116,225,112,231,95,219,76,215,68,213,57,218,38,204,35,192,97,196,105,179,127,183,136" alt="ID" title="ID"><!-- data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"0000ff","fillOpacity":0.6}' href="https://grasptheblock.wixsite.com/patchwork-eden"-->
<area data-maphilight='{"strokeColor":"0000ff","strokeWidth":5,"fillColor":"0000ff","fillOpacity":0.6}' onclick="addElement('MT')" shape="poly" coords="218,37,213,52,216,63,220,73,230,92,225,111,233,111,236,128,242,143,264,140,274,133,383,148,390,62" alt="MT" title="MT">
</map>
</td>
<td>
<div id="MDI">
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
在上面的代码中，我试图动态创建图像地图，并使用maphilight插件突出显示地图区域。它在前两次/三次中运行良好。但是之后，maphilight选项alwaysOn true不能正常工作。