启用单击时高亮显示jQuery Map高亮显示 [英] Enabling Highlight On Click for jQuery Map Highlighting

问题描述

我正在使用jQuery Highlight插件制作图表 (http://davidlynch.org/js/maphilight/docs/)，目前我可以单击该图，并根据您单击的区域(如简单选项卡)加载内容.

但是，我需要地图在点击时突出显示并禁用其他任何突出显示的区域.现在，我可以在单击时使区域突出显示，但不能禁用任何现有的突出显示.我还希望该图在悬停时切换内容，但是现在不如单击突出显示那样重要.

我为演示版准备了当前版本: http://jsfiddle.net/keith/PVpgK/

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

在此先感谢您的帮助

解决方案

您需要遍历其他区域并关闭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;
  });

I am making diagrams using the jQuery Highlight Plugin (http://davidlynch.org/js/maphilight/docs/) and I currently have the diagram that is clickable and loading content based on the area you are clicking on (like simple tabs).

However, I need the map to highlight on click and disable any other highlighted areas. Right now, I can make the area highlight on click, but not disable any existing highlights. I'd also like to have the diagram switch the content on hover, but that isn't as important right now as the highlight on click.

I have my current version up for a demo: http://jsfiddle.net/keith/PVpgK/

or the fullscreen result: http://jsfiddle.net/keith/PVpgK/embedded/result/

Thanks in advance for any help

解决方案

You need to loop through the other areas and turn off the alwayson to have the last click unhighlight on a new click. Try something like this:

  //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;
  });

这篇关于启用单击时高亮显示jQuery Map高亮显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！