点击切换myLibrary数组中Book对象read值功能异常求助

问题根源 #

你在createCard函数的阅读状态点击事件里，赋值语句的三元运算符逻辑写错了：

myLibrary[myLibrary.indexOf(book)].read = true ? false : true;

这里的三元运算优先级低于赋值运算符，代码会先执行true ? false : true，结果永远是false。所以不管原read值是true还是false，都会被设置为false，导致false状态下点击无变化。

修正方案 #

有两种简洁且正确的写法：

方案1：直接取反对象属性（推荐）

因为book是myLibrary数组里的对象引用，直接修改book.read就能同步到数组中，无需通过索引查找：

read.addEventListener('click', () => {
  book.read = !book.read; // 直接取反当前状态
  clearLibrary()
  createStoredCards()
})

方案2：修正三元运算逻辑

如果坚持通过数组索引修改，要把判断条件改为原read值：

read.addEventListener('click', () => {
  const bookIndex = myLibrary.indexOf(book);
  myLibrary[bookIndex].read = myLibrary[bookIndex].read ? false : true;
  clearLibrary()
  createStoredCards()
})

额外优化建议 #

可以在修改read状态后，不用重新渲染所有卡片，直接更新当前卡片的阅读状态文本，提升性能：

read.addEventListener('click', () => {
  book.read = !book.read;
  // 直接更新当前卡片的状态文本，不用重建所有卡片
  read.querySelector('.read-status').textContent = book.read ? "Read" : "Not read";
})

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