如何从 classname onclick 获取位置？

Question

我想获取标签在点击事件中的位置。例如：

<label class="labelClass" onclick="getPosition()"> label1 </label>//return position 1
<label class="labelClass" onclick="getPosition()"> label2 </label>//return position 2
<label class="labelClass" onclick="getPosition()"> label3 </label>//return position 3 ...etc
<label class="labelClass" onclick="getPosition()"> label4 </label>
<label class="labelClass" onclick="getPosition()"> label5 </label>

function getPosition() {
    //pseudocode to get position
    var label = document.getElementsByClassName("labelClass");
    alert(label.position) //something like this;
}

Answer 1

试试这个：

将onclick="getPosition()"改为onclick="getPosition(this)"
在函数 getPosition:

-- 将函数 getPosition() 更改为函数 getPosition(obj)

-- 使用alert(obj.style.position)

Answer 2

您必须将 HTMLCollection 转换为 Array 以便您可以从列表中找到元素的索引。希望这对你有用..

    <label class="labelClass" onclick="getPosition(this)" > label1 </label>//return position 0
    <label class="labelClass" onclick="getPosition(this)" > label2 </label>//return position 1
    <label class="labelClass" onclick="getPosition(this)" > label3 </label>//return position 2 ...etc
    <label class="labelClass" onclick="getPosition(this)"> label4 </label>
    <label class="labelClass" onclick="getPosition(this)"> label5 </label>

    function getPosition(label)
    {
       var list=document.getElementsByClassName("labelClass");
       list = [].slice.call(list); 

       alert(list.indexOf(label));
    }

这是jsfiddle

Answer 3

这可能会有帮助

function getPosition()
{
 var p = $(this);
 var position = p.position();
 $( ".result" ).text( "left: " + position.left + ", top: " + position.top );

}

如何从 classname onclick 获取位置？

How to get the position from classname onclick?

javascript

label

onclick

getelementsbyclassname