如何用JavaScript修改切换开关背景色并同步书籍阅读状态？

核心思路 #

• 利用CSS已有的:checked伪类自动控制开关背景色，无需手动修改backgroundColor
• 通过data-index属性关联DOM元素与library数组中的对应书籍对象
• 渲染书籍列表时根据read值初始化复选框状态，切换时同步更新数组属性

修正后的代码实现 #

1. 调整HTML结构（新增书籍容器与模态框） #

<div id="books-container"></div>

<!-- 添加书籍模态框 -->
<div id="add-book-modal" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; background: white; border: 1px solid #ccc;">
  <form id="add-book-form">
    <div>
      <label>Title:</label>
      <input type="text" id="title-input" required>
    </div>
    <div>
      <label>Author:</label>
      <input type="text" id="author-input" required>
    </div>
    <div>
      <label>Pages:</label>
      <input type="number" id="pages-input" required>
    </div>
    <div>
      <label>Read:</label>
      <input type="checkbox" id="read-input">
    </div>
    <button type="submit">Add Book</button>
  </form>
</div>
<button id="add-book-btn">Add Book</button>

2. 保留并补充CSS样式 #

.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;
}

/* 补充开关容器样式，避免布局混乱 */
.toggle-switch {
  display: flex;
  align-items: center;
  gap: 10px;
}
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

3. JavaScript逻辑实现 #

// 初始化书籍数组
let library = [
  { title: "book1", author: "author1", pages: 100, read: true },
  { title: "book2", author: "author2", pages: 100, read: false },
];

// 渲染书籍列表
function renderLibrary() {
  const booksContainer = document.getElementById('books-container');
  booksContainer.innerHTML = '';

  library.forEach((book, index) => {
    const bookCard = document.createElement('div');
    bookCard.className = 'single-books';
    bookCard.dataset.index = index; // 绑定数组索引，用于后续定位书籍

    bookCard.innerHTML = `
      <div class="card">
        <p class="keys">Title:</p>
        <p class="values">${book.title}</p>
      </div>
      <div class="card">
        <p class="keys">Author:</p>
        <p class="values">${book.author}</p>
      </div>
      <div class="card">
        <p class="keys">Pages:</p>
        <p class="values">${book.pages}</p>
      </div>
      <div class="card">
        <p>Read status</p>
        <div class="toggle-switch">
          <div>No</div>
          <label class="switch">
            <input type="checkbox" class="change-read-status" ${book.read ? 'checked' : ''}>
            <span class="slider"></span>
          </label>
          <div>Yes</div>
        </div>
      </div>
    `;

    booksContainer.appendChild(bookCard);
  });

  bindReadStatusEvents();
}

// 绑定阅读状态切换事件
function bindReadStatusEvents() {
  document.querySelectorAll('.change-read-status').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
      const index = parseInt(this.closest('.single-books').dataset.index);
      // 同步更新library数组中的read属性
      library[index].read = this.checked;
      console.log('Updated Library:', library); // 验证更新结果
    });
  });
}

// 添加书籍逻辑
document.getElementById('add-book-btn').addEventListener('click', () => {
  document.getElementById('add-book-modal').style.display = 'block';
});

document.getElementById('add-book-form').addEventListener('submit', function(e) {
  e.preventDefault();
  const newBook = {
    title: document.getElementById('title-input').value,
    author: document.getElementById('author-input').value,
    pages: parseInt(document.getElementById('pages-input').value),
    read: document.getElementById('read-input').checked
  };
  library.push(newBook);
  renderLibrary();
  document.getElementById('add-book-modal').style.display = 'none';
  this.reset();
});

// 页面加载时渲染初始列表
window.addEventListener('load', renderLibrary);

问题说明 #

你之前尝试手动修改backgroundColor未成功，原因在于：

1. 原HTML中使用了重复的id="change-read-status"，多本书籍时会导致选择器失效
2. 无需手动修改样式，CSS的:checked伪类已经能根据复选框状态自动切换滑块背景色，只要正确初始化复选框的checked属性即可

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