点击元素后如何获取对应数组对象的索引并修改其属性？

问题 #

做《The Odin Library Project》时，已经能根据阅读状态修改书籍卡片顶部状态栏颜色，但点击复选框标记已读/未读时，无法同步更新myLibrary数组里对应书籍对象的read属性。之前写的获取索引的代码，点击时会打印所有书籍的索引，没法定位到具体那本。

问题出在哪 #

1. 事件绑定错误：在displayBooks的循环里，每次都拿所有.mark-read复选框绑定点击事件，而且addEventListener没指定绑定到哪个元素，默认绑到了window上。结果就是点任意一个复选框，所有绑定的事件都会触发，自然会打印所有索引。
2. 未关联数组索引：UI元素和myLibrary里的书籍没对应上，点击事件找不到要更新的那个对象。

修复方案 #

优化事件绑定逻辑 #

别在循环里重复获取所有复选框，创建单本书卡片时，只给当前卡片里的复选框绑定事件，同时用卡片上的data-index存好这本书在数组里的位置。

同步更新数据与视图 #

点击复选框时，先通过索引找到myLibrary里的对应书籍，修改它的read属性，再同步更新状态栏样式。

修改后的核心代码（displayBooks函数） #

function displayBooks() {
  cardContainer.innerHTML = '';
  myLibrary.forEach((book, i) => {
    const displayBook = document.createElement('div');
    displayBook.className = 'card';
    displayBook.setAttribute('data-index', `${i}`);
    displayBook.innerHTML = `<h1 class="title">${book.title}</h1>
    <h2 class="author">${book.author}</h2>
    <h3 class="pages">${book.pages} pages</h3>
    <h2 class="status">${
      book.read
        ? `<input type="checkbox" class="mark-read" checked>`
        : `<input type="checkbox" class="mark-read">`
    } mark read</h2>
    <div class="status-bar ${book.read ? `read` : 'not-read'}"></div>`;
    cardContainer.appendChild(displayBook);

    // 给当前卡片的复选框绑定点击事件
    const markBtn = displayBook.querySelector('.mark-read');
    markBtn.addEventListener('click', (e) => {
      const bookIndex = parseInt(displayBook.dataset.index);
      // 同步更新myLibrary里的read属性
      myLibrary[bookIndex].read = e.target.checked;
      // 更新状态栏样式
      const statusBar = displayBook.querySelector('.status-bar');
      statusBar.classList.toggle('read', e.target.checked);
      statusBar.classList.toggle('not-read', !e.target.checked);
    });
  });
}

修复说明 #

• 每次创建卡片后，仅获取当前卡片内的复选框绑定事件，避免重复绑定和全局触发问题。
• 用data-index存储索引，点击时直接定位到myLibrary中的对应书籍，实现精准更新。
• 先修改数组内的read属性，再调整UI样式，保证数据与视图状态一致。

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