Question

以下代码循环遍历图像数组，并根据Highcharts标记（与图表上的点关联的文本）的位置创建它们。它在桌面上的Chrome，FF，IE中运行良好，但在Safar桌面或iOS中都不起作用，甚至Chrome iOS也不显示图像。

我得到的错误是： main.js：453 - TypeError：＆＃39; undefined＆＃39;不是对象（评估＆＃39; markerOffset.left＆＃39;）

$.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>');

    }

})

Answer 1

是的，所以问题不是OFFSET，而是$（'text'）是一个SVG元素，在Safari中你不能通过html（）得到它的内容。

我将过滤器部件更改为

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

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

});

现在正在运作......

jQuery offset（）在Safari / Chrome iOS中不起作用

1 个答案: