单击该元素时如何使用javascript获取HTML集合中元素的索引
Posted
技术标签:
【中文标题】单击该元素时如何使用javascript获取HTML集合中元素的索引【英文标题】：How to get the index of an element in a HTML collection when that element is clicked, using javascript 【发布时间】：2021-04-15 14:11:06 【问题描述】：我的 html 文件中有五个按钮。
看到它们是五个，我希望能够打印在 HTML 集合中单击的特定按钮的索引。即点击btn 4 我应该看到3 打印出来。我尝试将一些我认为可以做到但徒劳无功的 javascript 行放在一起。 JS代码为：
if (document.readyState == 'loading')
document.addEventListener('DOMContentLoaded',execute);
else
execute()
function execute()
var btns = document.getElementsByClassName('item');
for (var i = 0; i < btns.length; i++)
btns[i].addEventListener('click',btnClicked);
function btnClicked(event,btns)
var btn = event.currentTarget;
var btnIndex = btns.indexOf(btn)
console.log(btnIndex)
<body>
<div class="btn-items">
<button class="item">btn 1 </button>
<button class="item">btn 2 </button>
<button class="item">btn 3</button>
<button class="item">btn 4</button>
<button class="item">btn 5</button>
</div>
</body>要走的路是什么？
【问题讨论】：
去掉DOMContentLoaded事件周围的绒毛，只附加事件而不做任何检查。不要迭代实时 HTMLCollection，而是使用数组 (btns = Array.from(document.querySelectorAll('.item'));)。这也将解决您与indexOf 的问题。
查看this answer。即使它是关于 classList 它也适用于 querySelectorAll 的结果
【参考方案1】：
为什么不使用
if (document.readyState == 'loading')
document.addEventListener('DOMContentLoaded',execute);
else
execute();
function execute()
const btns = document.getElementsByClassName('item');
for(let i = 0; i < btns.length; i++)
btns[i].addEventListener('click',function()
console.log('button index : '+i);
);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button class="item">button 1</button>
<button class="item">button 2</button>
<button class="item">button 3</button>
<script src="script.js"></script>
</body>
</html>【讨论】：
【参考方案2】：您可以使用此解决方案获得所需的输出
function execute()
var btns = document.querySelectorAll('.item');
btns.forEach(btnClicked);
function btnClicked(btn,index)
btn.addEventListener('click',()=>
console.log(index)
);
这是一种更简洁的实现方式。
【讨论】：
【参考方案3】：您可以通过在 HTML 元素上使用 setAttribute 函数为每个按钮赋予自定义属性。然后您只需要使用getAttribute 函数检索此属性的值。请参见下面的代码示例：
var btns = document.getElementsByClassName('item')
for (var i = 0; i < btns.length; i++)
btns[i].addEventListener('click', btnClicked)
btns[i].setAttribute('data-index', i)
function btnClicked(event)
var btn = event.currentTarget;
console.log(btn.getAttribute('data-index'))
<div class="btn-items">
<button class="item">btn 1 </button>
<button class="item">btn 2 </button>
<button class="item">btn 3</button>
<button class="item">btn 4</button>
<button class="item">btn 5</button>
</div>【讨论】：
【参考方案4】：通常当您想将相同的事件应用于多个元素时，请尝试使用事件委托。
您所做的基本上是在父 btn-items 上监听事件，这是因为浏览器冒泡事件。
下面是一个示例，请注意，因为您会监听父级上的所有点击，如果您点击按钮之间的间隙，您将获得-1，在一个实际示例中，您可能需要处理此问题。
但是这种方法的优点是有一个事件监听器和一个事件回调。一个非常好的优点是，如果您稍后动态添加.item，它也会自动为这些工作。
const btns = document.querySelector('.btn-items');
btns.addEventListener('click', e =>
console.log([...btns.children].
indexOf(e.target));
);<div class="btn-items">
<button class="item">btn 1 </button>
<button class="item">btn 2 </button>
<button class="item">btn 3</button>
<button class="item">btn 4</button>
<button class="item">btn 5</button>
</div>【讨论】：
【参考方案5】：document.getElementsByClassName() 返回一个没有indexOf() 函数的node list。
(see this question)
您可以将i 作为参数传递给btnClicked()。
var btns;
if (document.readyState == 'loading')
document.addEventListener('DOMContentLoaded',execute);
else
execute()
function execute()
btns = document.getElementsByClassName('item');
for (let i = 0; i < btns.length; i++)
btns[i].addEventListener('click',(e)=> btnClicked(e,i));
function btnClicked(event,i)
console.log(i)
【讨论】：
以上是关于单击该元素时如何使用javascript获取HTML集合中元素的索引的主要内容，如果未能解决你的问题，请参考以下文章
使用 JavaScript 如何禁用右键单击或单击滚动条时如何在右键单击窗口中删除检查元素选项