如何使用 javascript 更改切换开关的背景颜色？

Question

我正在创建一个图书馆项目，每本书都是一个对象，其属性标题、作者、页面和阅读状态存储在数组中。 有一个“添加书籍”按钮，可打开一个模式并询问用户要添加的书籍的标题、作者、页数，并且有一个“已读”状态复选框。

选中的复选框会向书籍对象返回

true

值，未选中的复选框会返回

false

。

在界面中，“已读”状态是一个切换开关，用户可以切换该开关来更新书籍的“已读”状态。我想根据用户更改该开关的背景颜色。

bgColor

分别根据“已读”状态的

true

和

false

值呈现蓝色或红色。用户还应该能够通过切换屏幕上的开关，将库中存储的图书对象的阅读状态更改为 true 或 false。

我的书在 HTML 中看起来像这样：

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e20505;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.switch input:checked+.slider {
  background-color: #2196f3;
  /* bgColor when check-box is checked */
}

<div class="single-books">
  <div id="title" class="card">
    <p class="keys" id="title-key">
      Title:
    </p>
    <p class="values" id="title-value">
      Men are from mars, women are from venus
    </p>
  </div>
  <div id="author" class="card">
    <p class="keys" id="author-key">
      Author:
    </p>
    <p class="values" id="author-value">
      John Gray
    </p>
  </div>
  <div id="pages" class="card">
    <p class="keys" id="pages-key">
      Pages:
    </p>
    <p class="values" id="pages-value">
      286
    </p>
  </div>
  <div id="read-status" class="card">
    <p>Read status</p>
    <div class="toggle-switch">
      <div>No</div>
      <label class="switch">
        <input type="checkbox" id="change-read-status">
        <span class="slider"></span>
      </label>
      <div>Yes</div>
    </div>
  </div>
</div>

库数组将如下所示：

library = [
  { title: "book1", author: "author1", pages: 100, read: true },
  { title: "book2", author: "author2", pages: 100, read: false },
];

我尝试从用户那里获取复选框值，如果

checkbox.checked === true

并尝试更改开关的

backGrounColor

，但我无法理解如何做到这一点。

我看到了其他问题，但我无法解决这个问题。这可能很简单，但我的小脑袋无法理解。

编辑：该网站（如果有帮助） https://muzzu153.github.io/library/

Answer 1

如果您导航到已链接的页面，渲染将按照您指定的方式进行。我看到的唯一错误是当您添加一本新书时，其他记录的状态会重置（我假设这是因为您在演示中没有连接持久存储）。