2014-10-27 75 views
0

以下代码循环显示一组图像,并根据Highcharts标记(与图表上的点相关联的文本)的位置创建它们。它在桌面上的Chrome,FF,IE上效果很好,但在桌面或iOS上的Safar中都不起作用,甚至Chrome iOS也不显示图像。jQuery偏移量()在Safari/Chrome中不起作用iOS

我得到的错误是:main.js:453 - 类型错误: '未定义' 不是(评估 'markerOffset.left')

$.each(value, function(k, v){ 

    var z = i; 

    // Store the current marker 
    var marker = $('text').filter(function() { if($(this).html() === k) { return $(this) } }); 

    // Get the markers offset 
    var markerOffset = marker.offset(); 

    // If in Firefox, set the marker height to 13 px 
    if(marker.height() == 0){ 

     markerHeight = 13; 

    } 
    else{ 

     markerHeight = marker.height(); 

    } 

    // Get the image dimensions 
    // Create new image object and get the width and height 
    // The image has to be downloaded first 
    var img = new Image(); 

    // Set the image location 
    img.src = v.img; 

    // When the image is downloaded, you can get the dimensions 
    img.onload = function(){ 

     var imgHeight = img.height; 
     var imgDivHeight = img.height; 
     var imgWidth = img.width; 

     // If the image Width is more than 90px, resize it 
     if(imgWidth > 50){ 

      imgDivHeight = imgHeight/(imgWidth/50); 
      imgHeight = (imgHeight/(imgWidth/50)) + 5; 
      imgWidth = 50; 

     } 

     // Create the offset values based on the image sizes 
     **// THIS IS LINE 453** 
     var imgLeft = markerOffset.left - ((imgWidth - marker[0].getComputedTextLength())/2); 
     var imgTop = markerOffset.top - (imgHeight - (markerHeight/4)); 

     // Create an element for each value.img and make it position absolute and set the offset of the marker 
     $('.charts-inner').prepend('<div class="series-data series-picture-wrapper ' + hidden + ' image-on-chart" data-id="' + k + '" data-series="' + key + '" data-position-top="' + (imgTop - $('.app-ui-top').height() - (markerHeight)) + '" data-position-left="' + (imgLeft - ($('.app-ui-menu').width() + 3)) + '" data-hidden="' + hiddenAttr + '" style="z-index: ' + (5555 + z) + '; top:' + (imgTop - $('.app-ui-top').height() - (markerHeight)) + 'px; left:' + (imgLeft - ($('.app-ui-menu').width() + 3)) + 'px; width:' + imgWidth + 'px; height:' + imgDivHeight + 'px"><img src="' + v.img + '" style="width:' + imgWidth + 'px" /><div class="app-tooltip-stock nodisplay">' + v.tooltip + '</div></div>'); 

    } 

}) 

回答

1

权的对象,所以这个问题是不OFFSET,但是$('text')是一个SVG元素,在Safari中无法通过html()获取它的内容。

我改变了过滤器部分

var marker = $('text').filter(function() { 

    if($(this)[0].textContent === k) { return $(this) } 

}); 

,它是工作,现在...