Javascript 在Jquery中查找多个图像的图像高度变量

我目前正在为网站上的“工具提示”编写这个脚本。我发现我当前拥有的代码将获得页面上第一个工具提示图像（“pop1”）的图像高度，但它忽略了其余部分（它们显示为null）

获取所有工具提示图像高度并在用户每次滚动工具提示图像时使用它们的最有效方法是什么

另一个问题，如果有人能够解决这个问题的话，就是在我的整个网页（更多的div、行、列等）上，脚本开始崩溃，因为clientX和clientY受到各种div和页面元素的影响

我希望能够将clientX和clientY设置为用户鼠标所在的精确（x，y）坐标，相对于整个网页，而不是相对于页面的子元素

谢谢

以下是我的JSFIDLE：

JS代码：

$('a.popper').hover(function (e) {

    var target = '#' + ($(this).attr('data-popbox'));
    $(target).show();
}, function () {
    var target = '#' + ($(this).attr('data-popbox'));
    if (!($("a.popper").hasClass("show"))) {
        $(target).hide();
    }
});

$('a.popper').mousemove(function (e) {
    var target = '#' + ($(this).attr('data-popbox'));
    // images vary in height!
    // images are all 366px wide.
    var imageWidth = 366;
    var imageHeight = $(".popimg").height();
    //alert('Image Height: ' + imageHeight);

    //Offset tooltip:
    //10px to the right of cursor
    var imageX = e.clientX + 20;
    //imageHeight up from cursor
    var imageY = e.clientY - imageHeight - 20;

    // Find bounds of current window, and if...
    // Tooltip goes off right side:
    if ((imageX + imageWidth) > $(window).width()) {
        //Move tooltip left so it meets edge:
        imageX = $(window).width() - imageWidth;
    }
    // Tooltip goes off top
    if (imageY < 0) {
        //Move tooltip down so it meets top:
        imageY = 0;
    }
    $(target).css('top', imageY).css('left', imageX);
});

$（'a.popper'）。悬停（函数（e）{
var target='#'+（$（this.attr（'data-popbox'））；
$（target.show（）；
}，函数（）{
var target='#'+（$（this.attr（'data-popbox'））；
如果（！（$（$a.popper”）.hasClass（“show”））{
$（target.hide（）；
}
});
$（'a.popper'）.mousemove（函数（e）{
var target='#'+（$（this.attr（'data-popbox'））；
//图像高度不同！
//图像都是366px宽。
var imageWidth=366；
var imageHeight=$（“.popimg”）.height（）；
//警报（'图像高度：'+图像高度）；
//偏移工具提示：
//光标右侧的10px
var imageX=e.clientX+20；
//从光标向上的图像高度
var-imageY=e.clientY-imageHeight-20；
//查找当前窗口的边界，如果。。。
//工具提示从右侧消失：
如果（（imageX+imageWidth）>$（window.width（））{
//向左移动工具提示，使其与边相交：
imageX=$（窗口）.width（）-imageWidth；
}
//工具提示从顶部消失
如果（图像Y<0）{
//向下移动工具提示，使其与顶部对齐：
imageY=0；
}
$（target）.css（'top'，imageY）.css（'left'，imageX）；
});

获取所有工具提示图像高度并在用户每次滚动工具提示图像时使用它们的最有效方法是什么

首先，我想你的意思是当用户在其中一个元素上进行鼠标悬停时？但是，这似乎是可行的，它直接在元素上兑现图像的高度，并在下次鼠标悬停时使用它：

 $('a.popper').mousemove(function (e) {
    var target = '#' + ($(this).attr('data-popbox'));
    // images vary in height!
    // images are all 366px wide.
    var imageWidth = 366;
    $target = $(target);

    if (!$target.attr("height")) {
        var img = $target.closest(".popbox").children("img");
        var imageHeight = img.height();
        $target.attr("height", imageHeight);
        console.log("height attribute set");
    } else {
        var imageHeight = +($target.attr("height")) + 0;
        console.log("cached height used");
    }

    console.log('Image Height: ', imageHeight);

    //Offset tooltip:
    //10px to the right of cursor
    var imageX = e.clientX + 20;
    //imageHeight up from cursor
    var imageY = e.clientY - imageHeight - 20;

    // Find bounds of current window, and if...
    // Tooltip goes off right side:
    if ((imageX + imageWidth) > $(window).width()) {
        //Move tooltip left so it meets edge:
        imageX = $(window).width() - imageWidth;
    }
    // Tooltip goes off top
    if (imageY < 0) {
        //Move tooltip down so it meets top:
        imageY = 0;
    }
    $(target).css('top', imageY).css('left', imageX);
});

$（'a.popper'）.mousemove（函数（e）{
var target='#'+（$（this.attr（'data-popbox'））；
//图像高度不同！
//图像都是366px宽。
var imageWidth=366；
$target=$（target）；
如果（！$target.attr（“高度”））{
var img=$target.closest（.popbox”）.children（“img”）；
var imageHeight=img.height（）；
$target.attr（“高度”，图像高度）；
log（“高度属性集”）；
}否则{
var imageHeight=+（$target.attr（“height”））+0；
log（“使用缓存的高度”）；
}
log（'Image Height:'，imageHeight）；
//偏移工具提示：
//光标右侧的10px
var imageX=e.clientX+20；
//从光标向上的图像高度
var-imageY=e.clientY-imageHeight-20；
//查找当前窗口的边界，如果。。。
//工具提示从右侧消失：
如果（（imageX+imageWidth）>$（window.width（））{
//向左移动工具提示，使其与边相交：
imageX=$（窗口）.width（）-imageWidth；
}
//工具提示从顶部消失
如果（图像Y<0）{
//向下移动工具提示，使其与顶部对齐：
imageY=0；
}
$（target）.css（'top'，imageY）.css（'left'，imageX）；
});

显然，您应该删除所有仅用于测试目的的console.log语句

关于第二个问题，如果没有另一个JSFIDLE或额外的代码，很难说出任何具体的内容