javascript - 获取由类标识的元素的位置

Question

我有以下几个图标链接的 HTML(“此处的 url”是我代码中的实际 url):

<div class="horizontal-icons" id="div">

    <a href="url here" target="_blank" class="livepreview" data-position="bottom">
        <div><h4>diary</h4></div>
    </a>

    <a href="url here" target="_blank" class="livepreview" data-position="bottom">
        <div><h4>art</h4></div>
    </a>

    <a href="url here" target="_blank" class="livepreview" data-position="bottom">
       <div><h4>other stuff</h4></div>
    </a>

</div>

我正在尝试创建 javascript，它将在悬停在任何图标(“a”元素)上时生成实时预览，但与悬停在图标上的位置完全相同。所以我的脚本的第一个任务是确定悬停时“a”元素的位置。但是，我的代码返回了我要查找的 X 和 Y 坐标的“NaN”值。

谁能确定为什么我的代码没有按预期工作？对于脚本，我从 Kirupa 在 http://www.kirupa.com/html5/get_element_position_using_javascript.htm 概述的代码中得到了启发。和 api.jquery 在 https://api.jquery.com/hover/ :

    function getPosition(element) {
    var xPosition = 0,
        yPosition = 0;

    while (element) {
        xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
        element = element.offsetParent;
    }
    return { x: xPosition, y: yPosition };
}

$(".livepreview").hover(
    function () {
        var livePreviewElement = $(this);
        var position = getPosition(livePreviewElement);
        alert("The image is located at: " + position.x + ", " + position.y);
    }
);

您可以在 173.246.106.210 看到实现的元素和代码。在回复时，请记住我没有正式学习 Javascript。我只了解我通过一些教程拼凑而成的内容，而我对 JQuery 的了解就更少了。 ^^'

Answer 1

唯一的问题是您正在传递一个 jQuery 对象并将其视为 DOM 对象。 jQuery 选择 $(selector) 返回一个类似数组的 jQuery 对象，但不是 native DOM 元素。

你只需要改变这个

var livePreviewElement = $(this); 
var position = getPosition(livePreviewElement);

到

var livePreviewElement = this;
var position = getPosition(livePreviewElement);