jquery - 使用 Jquery Maphilight 插件更改单击区域的填充颜色

Question

我正在使用 JQuery maphilight 插件来突出显示世界地图中的区域。现在我已经为区域元素设置了以下默认选项

fillColor: 'F25607' //orange color
alwaysOn:  'true'

因此，在页面加载时，区域元素的颜色为橙色。我为每个区域元素都有一个 onclick 事件。我需要将 map 中单击的区域元素的突出显示颜色(即 fillColor)更改为不同的颜色，例如绿色当我单击 map 中的另一个元素时，该元素应更改为绿色，而先前选定的元素应更改回橙色。这是我的 map 的示例代码

<img id="theImg" class="map" src="/gra/images/worldblank.png" usemap="#worldmap" />
<map id="worldmap" name="worldmap">
      <area class='area' shape="circle" alt="Israel" title="Israel" coords="423,232,7" href="#" onclick="loadActivity('Israel');" />
      <area class='area' shape="circle" alt="China" title="China" coords="548,229,5" href="#" onclick="loadActivity('China');"  />
</map>   

要完成的示例 js 函数是:

<script>
jQuery(document).ready(function(){
        jQuery('.map').maphilight();
    });

$(function() {
  $('.area').click(function(e) {
e.preventDefault(); // from the samples, i guess used to overrride default options
// get the clicked area element and set its fillColor to green 
// make the previous selected area fillColor to the default options value  (if we need to do this)
// use the trigger function to trigger this change
    });
 });
</script>

Answer 1

希望这对您有帮助:

<script>
$(function() {
  $('.area').click(function(e) {
    e.preventDefault();
    var data = $(this).data(maphilight) || {};
    data.fillColor = 'FF0000'; // Sample color

    // This sets the new data, and finally checks for areas with alwaysOn set
    $(this).data('maphilight', data).trigger(alwaysOn.maphilight);
  });
});
</script>

来源:Example from the official documentation .