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。