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

将一个名为index的属性添加到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 3

因为元素本身对任何索引都不了解，所以不可能这样。解决此问题的另一种方法是动态创建按钮：

<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 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)">

JavaScript：如何获取元素索引的名称？

4 个答案: