JavaScript：如何獲取元素索引的名稱？

Question

需要從元件

<input type="button" name="test" value="test" onclick="getindex(this)"> <!--index 0--> 
<input type="button" name="test" value="test" onclick="getindex(this)"> <!--index 1--> 
<input type="button" name="test" value="test" onclick="getindex(this)"> <!--index 2--> 
<input type="button" name="test" value="test" onclick="getindex(this)"> <!--index 3--> 
... 
<script> 
function getindex(obj) { 
    var i = obj.index; //here is wrong. How to get index? 
} 
</script> 

Answer 1

的方法不易發生問題時，更改的頁面，是將值分配給一數據屬性的陣列獲得的元素的索引號：

<input type="button" name="test" value="test" onclick="getindex(this)" data-index="0"> 
<input type="button" name="test" value="test" onclick="getindex(this)" data-index="1"> 
<input type="button" name="test" value="test" onclick="getindex(this)" data-index="2"> 
<input type="button" name="test" value="test" onclick="getindex(this)" data-index="3"> 

然後檢索這些數據屬性索引：

<script> 
function getindex(obj) { 
    var i = parseInt(obj.dataset.index,10); 
} 
</script> 

Answer 2

因爲元素本身不知道任何事情的索引，它是不可能通過這種方式。一種替代方法來解決這個問題將是動態創建的按鈕：

<script> 
    for (var i = 0; i < 4; i++) { 
     var onClick = function() { 
     console.log(i); 
     } 

     var button = document.createElement('button'); 
     button.onclick = onClick; 
     document.querySelector('body').appendChild(button); 
    } 
</script> 

Answer 3

添加所謂的指數HTML按鈕，然後嘗試訪問它的按鈕點擊屬性。你可以使用這個。

<input type="button" index='0' name="test" value="test" onclick="getindex(this)"> <!--index 0--> 
<input type="button" index='1' name="test" value="test" onclick="getindex(this)"> <!--index 1--> 
<input type="button" index='2' name="test" value="test" onclick="getindex(this)"> <!--index 2--> 
<input type="button" index='3' name="test" value="test" onclick="getindex(this)"> <!--index 3--> 

<script> 
    function getindex(obj) { 
     var i = obj.getAttribute('index'); 
    } 
</script> 

Answer 4

你不需要添加屬性...

here is a fiddle

<script type="text/javascript"> 
    function getindex(index) { 
     alert(index); 
    } 
</script> 

<input type="button" name="test" value="test" onclick="getindex(0)"> 
<input type="button" name="test" value="test" onclick="getindex(1)"> 
<input type="button" name="test" value="test" onclick="getindex(2)"> 
<input type="button" name="test" value="test" onclick="getindex(3)">