Maphilight与IE9中的jquery选项卡发生冲突

Question

任何人？任何线索？

我正试图在同一页上创建两个具有相同功能的地图。这适用于所有现代浏览器（IE11，Chrome等），但不适用于IE9。您可以通过以下小提琴来证明这一点：http://jsfiddle.net/Guill84/Sws2T/13/

启动插件的脚本我粘贴在下面以便于参考。是否有理由在所有浏览器中正确加载，但不在IE9中？或者我的代码有问题吗？所使用的插件是“Maphilight”提前（https://github.com/kemayo/maphilight）

谢谢， ģ

$(function() { 
    $('.map').maphilight({ 
     stroke: false, 
     fillColor: 'D2D2D2', 
     fillOpacity: 1 
}); 
    $('.map2').maphilight({ 
     stroke: false, 
     fillColor: 'D2D2D2', 
     fillOpacity: 1 
}); 

    //light up first element 
    //this code is repeating below but not sure how to make more condensed 
    var data = $(this).data('maphilight') || {}; 
    data.alwaysOn = true; 
    $('.map, .map2').data('maphilight', data).trigger('alwaysOn.maphilight'); 
    // initialize tabbing 
    $(".tabs area:eq(0)").each(function() { 
     $(this).addClass("current"); 
    }); 
    $(".tab-content").each(function() { 
     $(this).children(":not(:first)").hide(); 
    }); 
    $(".tabs area").each(function (o, i) { 
     var d = $(this).data('maphilight') || {}; 
     d.fillOpacity = 1; 
     d.alwaysOn = true; 
     $(this).attr("rel", d.fillColor); 
     $(this).data('maphilight', d).trigger('alwaysOn.maphilight'); 
    }); 
    $(".tabs area").hover(function() { 
     var d = $(this).data('maphilight') || {}; 
     //d.fillOpacity=0.6; 
     d.fillColor = "A0A0A0"; 
     $(this).data('maphilight', d).trigger('alwaysOn.maphilight'); 
    }, function() { 
     var d = $(this).data('maphilight') || {}; 
     //d.fillOpacity=0.6; 
     if (typeof d.clicked === "undefined" || d.clicked == false) { 
      d.fillColor = $(this).attr("rel"); 
     } else { 
      d.fillColor = "379ee0"; 

     } 
     $(this).data('maphilight', d).trigger('alwaysOn.maphilight'); 
    }); 
    //map clicks 
    $(".tabs area").click(function() { 
     //areas loop: 
     $(".tabs area").not(this).each(function (o, i) { 
      var d = $(this).data('maphilight') || {}; 
      d.clicked = false; 
      d.fillColor = $(this).attr("rel"); 
      if (d.alwaysOn === false) { 
       //d.alwaysOn = false; 
       $(this).data('maphilight', data).trigger('alwaysOn.maphilight'); 
      } 
     }); 

     var data = $(this).data('maphilight') || {}; 
     data.alwaysOn = true; 
     data.fillColor = "379ee0"; 
     data.clicked = true; 
     $(this).data('maphilight', data).trigger('alwaysOn.maphilight'); 

     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("normal"); 
      }); 

     } 
     return false; 
    }); 
}); 

Answer 1

我看到它不是插件jQuery Maphilight，但与其他一项所述的问题 - jQuery Panzoom，看来不支持低于v.9的Internet Explorer版本：

Panzoom使用CSS变换和矩阵函数在浏览器中利用硬件/ GPU加速，这意味着元素可以是任何东西：图像，视频，iframe，画布，文字，WHATEVER。虽然IE < = 8不支持，但这个插件是未来的证明。

看到这里的细节 - https://github.com/timmywil/jquery.panzoom/blob/master/README.md

但是，您说，您使用IE 9测试，究竟你进行测试，这是真正的IE 9，或者你在模拟版本模式下运行IE 11？ 我可以确认，jsfiddle代码在IE 9模拟模式下工作得很好，除了使用鼠标滚轮进行缩放之外，它仅适用于按钮Zoom In/Zoom Out。