如何在真假之间切换对象属性？

Question

我有一个表单，用户从他们正在阅读的书中输入信息，并在点击提交时，信息作为其自己的对象在数组中发送。我还运行了一个 forEach 方法，该方法循环遍历数组并将每个对象显示为网页上的 div。

let myLibrary = [];

const book = {
  title: title,
  author: author,
  pages: parseInt(pages),
  read: false,
};

myLibrary.push(book)

从上面的代码可以看出，用户填写的三个属性是书名、作者和页数。还有一个自动添加的属性，称为 read 属性，它会自动设置为 false。

问题

我的问题是这个。我在每个 div 的底部显示了以下代码。

<div class="read">
    <label class="switch">
       <input type="checkbox" />
       <span class="slider round"></span>
    </label>
</div>

这段代码非常简单。这是我找到here 的拨动开关。

我想要它，所以当拨动开关变灰时，读取状态设置为false。但是当拨动开关打开时，读取属性设置为true。我很难弄清楚如何完成这项工作。

我试过的

我能够使用 onclick 来选择切换开关的父元素，并使用 console.log 对其进行了测试，但是我不确定从那里去哪里。我尝试使用三元运算符将book.read 更新为true，但它超出了范围并导致错误。

document.querySelector(".main").onclick = (ev) => {
  let el = ev.target.classList.contains("switch")
    ? ev.target.parentElement
    : ev.target.classList.contains("slider")
    ? ev.target
    : false;
  if (el) {
    console.log("hello");
    book.read ? true : false; // ReferenceError
  }
};

Answer 1

你太复杂了，错过了访问数组中的书

将数据属性设置为书的索引并执行以下操作

document.querySelector(".main").addEventListener("click", (ev) => {
  let el = ev.target.closest("label")
  if (el && el.classList.contains("switch"));
  book[+el.dataset.book].read = el.querySelector("[type=checkbox]").checked;
};

<div class="read">
    <label class="switch" data-book="0">
       <input type="checkbox" />
       <span class="slider round"></span>
    </label>
</div>