Question

我有几个图标链接的HTML（这里的“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 selection $(selector)返回一个类似于数组的jQuery对象，但不是本机DOM元素。

您只需更改此

即可

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

到

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

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

1 个答案: