启用突出显示单击以查看jQuery Map突出显示

我正在使用jQuery Highlight插件（http://davidlynch.org/js/maphilight/docs/）制作图表，我目前有可点击的图表，并根据您点击的区域加载内容（如简单的标签） 。

但是，我需要在点击时突出显示地图并禁用任何其他突出显示的区域。 现在，我可以在点击时突出显示区域，但不禁用任何现有的高光。 我还想让图表在hover时切换内容，但现在这不像点击时的重点那么重要。

我有我当前的版本进行演示： http ： //jsfiddle.net/keith/PVpgK/

或全屏结果： http ： //jsfiddle.net/keith/PVpgK/embedded/result/

在此先感谢您的帮助

Answer 1

您需要遍历其他区域并关闭alwayson以使最后一次单击在新单击时不亮。 尝试这样的事情：

//map clicks $(".tabs area").click(function(){ //AREAS LOOP: $(".tabs area").each(function(){ var d = $(this).data('maphilight') || {}; if(d.alwaysOn == true){ d.alwaysOn = false; } }); //DISPLAY CURRENT LI FUNCTION: $('.tabs area').mouseover(function(){ var thisTarget = $(this).attr("href"); if(thisTarget){ $('#test').innerHTML = thisTarget; } $(this).parents(".tabs").find('area.current').removeClass('current'); $(this).addClass('current'); $(this).parents(".tabs").nextAll(".tab-content").children(":visible").fadeOut(1, function() { $(thisTarget).fadeIn("fast"); }); }); //This block is what creates highlighting by trigger the "alwaysOn", var data = $(this).data('maphilight') || {}; data.alwaysOn = true; //NOTICE I MADE THIS ALWAYS TRUE $(this).data('maphilight', data).trigger('alwaysOn.maphilight'); //there is also "neverOn" in the docs, but not sure how to get it to work if ($(this).hasClass("current") == false) { var thisTarget = $(this).attr("href"); $(this).parents(".tabs").find('area.current').removeClass('current'); $(this).addClass('current'); $(this).parents(".tabs").nextAll(".tab-content").children(":visible").fadeOut(1, function() { $(thisTarget).fadeIn("fast"); }); } return false; }); 

Answer 2

HTML代码：

JS代码

 $(function(){ $('.map').maphilight({ fillColor: 'ff0000', fillOpacity:0.4, stroke:false, neverOn:true }); $('.punto').click(function(){ var data = $(this).data('maphilight') || {}; data.alwaysOn=true; $(this).data('maphilight', data).trigger('alwaysOn.maphilight');; }); }) 

Answer 3

更有效的方法是在点击时添加一个类，并在单击下一个位置时将其删除。 添加完课程后，您可以进行操作。 这样，如果你有数百或数千个区域（就像我的地图那样），页面在尝试循环每个区域时不会锁定。

以下链接将带您找到解释此问题的答案。 https://stackoverflow.com/a/8397900/1101054