当前位置：首页 > JavaScript

js实现点击索引

2026-04-07 07:29:59JavaScript

实现点击索引的 JavaScript 方法

使用 `data-*` 属性存储索引

通过 HTML 元素的 data-index 属性存储索引值，点击时通过 JavaScript 获取该值：

js实现点击索引

<button data-index="1">Item 1</button>
<button data-index="2">Item 2</button>

document.querySelectorAll('button').forEach(button => {
  button.addEventListener('click', function() {
    const index = this.getAttribute('data-index');
    console.log('Clicked index:', index);
  });
});

通过闭包保存索引

在循环中为每个元素绑定事件时，通过闭包保留当前索引值：

js实现点击索引

const items = document.querySelectorAll('.item');
items.forEach((item, index) => {
  item.addEventListener('click', () => {
    console.log('Clicked index:', index);
  });
});

事件委托方式

通过父元素监听点击事件，利用 event.target 获取具体子元素的索引：

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

document.getElementById('list').addEventListener('click', (event) => {
  if (event.target.tagName === 'LI') {
    const index = Array.from(event.target.parentNode.children).indexOf(event.target);
    console.log('Clicked index:', index);
  }
});

动态生成元素的索引处理

当元素是动态生成时，推荐使用事件委托或显式存储索引：

// 动态添加元素示例
function addItem(text) {
  const list = document.getElementById('list');
  const item = document.createElement('li');
  item.textContent = text;
  list.appendChild(item);
}

// 事件委托方式始终有效
document.getElementById('list').addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    const items = e.currentTarget.children;
    const index = Array.from(items).indexOf(e.target);
    console.log('Dynamic item index:', index);
  }
});