点击列表项删除链接时，如何获取对应项的taskID？

看起来你遇到了事件绑定和元素定位的经典问题——之所以每次都拿到第一个taskID，大概率是因为你在获取ID时用了全局选择器（比如document.querySelector('.task-id')），或者事件绑定没有关联到当前点击的元素上下文。下面给你几种针对性的解决方案，适配不同的开发场景：

1. 原生JavaScript方案（推荐事件委托） #

假设你通过axios获取数据后，是动态渲染列表的，那最稳妥的方式是用事件委托（把事件绑定到父元素，而非每个按钮），同时通过data-*属性存储当前项的taskID：

// 先渲染列表
axios({
  method: 'GET',
  auth: { username: APIKey, password: ':xxx' },
  url: '你的API地址'
}).then(response => {
  const taskList = document.getElementById('task-list');
  response.data.tasks.forEach(task => {
    const li = document.createElement('li');
    // 把taskID存在按钮的data属性里
    li.innerHTML = `
      <span>${task.content}</span>
      <a href="#" class="delete-btn" data-task-id="${task.taskID}">删除</a>
    `;
    taskList.appendChild(li);
  });

  // 给父元素绑定点击事件，统一处理所有删除按钮的点击
  taskList.addEventListener('click', function(e) {
    // 判断点击的是删除按钮
    if (e.target.classList.contains('delete-btn')) {
      e.preventDefault(); // 阻止默认跳转行为
      // 从当前点击的按钮上获取对应的taskID
      const taskID = e.target.dataset.taskId;
      completeTask(taskID); // 传入你的函数
    }
  });
});

这种方式不仅能精准拿到当前点击项的ID，还能避免给每个按钮单独绑定事件，性能更优，动态新增的列表项也能正常触发事件。

2. jQuery方案 #

如果你的项目用了jQuery，逻辑类似，核心是用$(this)定位当前点击的按钮：

axios({
  method: 'GET',
  auth: { username: APIKey, password: ':xxx' },
  url: '你的API地址'
}).then(response => {
  const $taskList = $('#task-list');
  response.data.tasks.forEach(task => {
    const $li = $(`
      <li>
        <span>${task.content}</span>
        <a href="#" class="delete-btn" data-task-id="${task.taskID}">删除</a>
      </li>
    `);
    $taskList.append($li);
  });

  // 事件委托绑定
  $taskList.on('click', '.delete-btn', function(e) {
    e.preventDefault();
    // $(this)就是当前点击的删除按钮
    const taskID = $(this).data('task-id');
    completeTask(taskID);
  });
});

3. Vue/React等框架方案 #

如果是用现代前端框架，直接在渲染列表时把taskID作为参数传入点击事件即可，完全不会有混淆的问题：

Vue示例 #

<template>
  <ul>
    <li v-for="task in tasks" :key="task.taskID">
      {{ task.content }}
      <button @click="handleDelete(task.taskID)">删除</button>
    </li>
  </ul>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return { tasks: [] };
  },
  mounted() {
    axios({
      method: 'GET',
      auth: { username: this.APIKey, password: ':xxx' },
      url: '你的API地址'
    }).then(res => {
      this.tasks = res.data.tasks;
    });
  },
  methods: {
    handleDelete(taskID) {
      this.completeTask(taskID);
    },
    completeTask(taskID) {
      // 你的业务逻辑
    }
  }
};
</script>

React示例 #

import axios from 'axios';
import { useEffect, useState } from 'react';

function TaskList() {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    axios({
      method: 'GET',
      auth: { username: APIKey, password: ':xxx' },
      url: '你的API地址'
    }).then(res => {
      setTasks(res.data.tasks);
    });
  }, []);

  const handleDelete = (taskID) => {
    completeTask(taskID);
  };

  return (
    <ul>
      {tasks.map(task => (
        <li key={task.taskID}>
          {task.content}
          <button onClick={() => handleDelete(task.taskID)}>删除</button>
        </li>
      ))}
    </ul>
  );
}

核心思路就是：让点击事件和当前列表项的taskID直接关联，要么通过元素的data-*属性存储，要么在框架中直接把ID作为事件参数传入，避免用全局选择器去取值。

内容的提问来源于stack exchange，提问作者Kuyashii