如何用JavaScript实现多个元素的textarea内容独立修改？

嘿，我看你遇到了一个典型的DOM与数据绑定不独立的问题——所有任务的textarea都同步显示第一条评论，这是因为你没有给每个任务项分配独立的数据上下文，导致所有操作都指向了同一个数据源或DOM元素。下面我给你拆解问题并给出具体的解决方案：

问题根源 #

通常这种情况是因为：

• 你用了全局变量来存储评论内容，所有任务共享同一个变量；
• 操作textarea时用了全局选择器（比如document.querySelector('textarea')），不管点击哪个任务的Notes，都会选中同一个textarea元素；
• 生成任务DOM时，没有为每个任务标记唯一标识，无法区分当前操作的是哪个任务。

解决方案：给每个任务绑定独立数据与DOM上下文 #

我们需要为每个任务创建独立的数据对象，同时在DOM元素上标记唯一ID，让操作能精准对应到单个任务：

1. 定义任务数据结构 #

首先用数组存储所有任务，每个任务包含唯一ID、名称、评论内容、完成状态等属性：

// 初始化任务数组，每个任务有独立的note字段
let tasks = [];
let taskIdCounter = 0; // 生成唯一ID

2. 添加任务时创建独立数据与DOM #

点击Add按钮时，为新任务生成唯一ID，并存入任务数组，同时生成带标识的DOM元素：

document.getElementById('add-btn').addEventListener('click', function() {
  const taskName = document.getElementById('task-input').value.trim();
  if (!taskName) return;

  const newTask = {
    id: ++taskIdCounter,
    name: taskName,
    note: '', // 每个任务独立的评论内容
    isCompleted: false
  };
  tasks.push(newTask);

  // 生成未完成任务的DOM
  const taskItem = document.createElement('div');
  taskItem.className = 'task-item';
  taskItem.dataset.taskId = newTask.id; // 标记唯一ID
  taskItem.innerHTML = `
    <span>${newTask.name}</span>
    <button class="finish-btn">Finish</button>
  `;
  document.getElementById('pending-tasks').appendChild(taskItem);

  // 绑定Finish按钮事件
  taskItem.querySelector('.finish-btn').addEventListener('click', handleFinishTask);

  document.getElementById('task-input').value = '';
});

3. 处理Finish按钮：迁移到已完成区域并添加Notes按钮 #

点击Finish时，找到对应任务，更新状态，生成带Notes按钮的已完成任务DOM：

function handleFinishTask(e) {
  const taskItem = e.target.closest('.task-item');
  const taskId = parseInt(taskItem.dataset.taskId);
  const task = tasks.find(t => t.id === taskId);
  if (!task) return;

  task.isCompleted = true;
  taskItem.remove();

  // 生成已完成任务的DOM
  const completedItem = document.createElement('div');
  completedItem.className = 'completed-task';
  completedItem.dataset.taskId = taskId;
  completedItem.innerHTML = `
    <span>${task.name}</span>
    <button class="notes-btn">Notes</button>
    <div class="notes-container" style="display: none;">
      <textarea readonly>${task.note}</textarea>
      <button class="edit-btn">Edit</button>
      <button class="save-btn" style="display: none;">Save</button>
    </div>
  `;
  document.getElementById('completed-tasks').appendChild(completedItem);

  // 绑定Notes、Edit、Save按钮事件
  const notesBtn = completedItem.querySelector('.notes-btn');
  const notesContainer = completedItem.querySelector('.notes-container');
  const textarea = completedItem.querySelector('textarea');
  const editBtn = completedItem.querySelector('.edit-btn');
  const saveBtn = completedItem.querySelector('.save-btn');

  notesBtn.addEventListener('click', () => {
    notesContainer.style.display = notesContainer.style.display === 'none' ? 'block' : 'none';
  });

  editBtn.addEventListener('click', () => {
    textarea.removeAttribute('readonly');
    textarea.focus();
    editBtn.style.display = 'none';
    saveBtn.style.display = 'inline-block';
  });

  saveBtn.addEventListener('click', () => {
    textarea.setAttribute('readonly', true);
    editBtn.style.display = 'inline-block';
    saveBtn.style.display = 'none';
    // 更新对应任务的note数据
    task.note = textarea.value;
  });
}

关键要点 #

• 每个任务都有唯一的id，通过data-task-id绑定到DOM元素，确保操作能精准找到对应任务；
• 评论内容存储在每个任务自己的note字段中，而非全局变量；
• 操作textarea时，都是通过当前任务的DOM元素去查询（比如completedItem.querySelector('textarea')），而非全局选择器。

这样修改后，每个任务的评论内容都是独立存储和操作的，修改任一任务的评论都不会影响其他任务啦！

内容的提问来源于stack exchange，提问作者يوسف