获取元素的位置确定了

类

我有一对夫妇的图标链接（以下简称“网址在这里”的是在我的代码真实URL）以下HTML：获取元素的位置确定了

<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”值。

任何人都可以识别为什么我的代码不按预期工作？对于剧本，我已经采取了从http://www.kirupa.com/html5/get_element_position_using_javascript.htm和api.jquery由概述了Kirupa代码的提示在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。 ^^'

来源

2015-11-10 Rona

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

你只需要改变这种

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

到

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

来源

2015-11-10 05:02:51

获取元素的位置确定了

回答

相关问题