单击按钮即可更改数组中对象的值，需要帮助

Question

我正在建造一个图书库，需要帮助调整"读取"；myLibrary数组中对象的值。当我点击父元素的读取状态div时，如果关联对象的当前读取值为true，则它应该更改为false，反之亦然。我添加了一个功能，所以当我点击"；读取"；div，它会更改myLibrary数组中与其关联的对象的读取值。我遇到的问题是，它只会将数组中对象的读取值从true更改为false。如果我点击div，并且它的关联对象已经有一个读取值false，则没有任何变化。对象的读取值保持为false。我需要帮助的函数在底部的createCard((中；读取"；div。请帮忙！非常感谢。

const library = document.querySelector('#library');
let myLibrary = [];

class Book {
constructor(title, author, pages, read) {
this.title = title;
this.author = author;
this.pages = pages;
this.read = read;
}
}
Book.prototype.addToLibrary = function () {
myLibrary.push(this)
}
// myLibrary.push(new Book("The Hobbit", "J. R. R. Tolken", 471, read));
// myLibrary.push(new Book("Harry Potter", "J. K. Rowling", 381, read));
// myLibrary.push(new Book("Greenlights", "Matthew McConaughey", 252, read));
// submits the form
const addToLibraryBtn = document.querySelector('.modal-add-btn');
addToLibraryBtn.addEventListener('click', () => {
const input = document.querySelectorAll('input')
const title = input[0].value;
const author = input[1].value;
const pages = input[2].value;
const read = document.getElementById('read').value === "Yes" ? true : false;
const book = new Book(title, author, pages, read)
book.addToLibrary()
clearLibrary()
createStoredCards()
closeModal()
clearForm()
})
// clears the display and re-adds cards in myLibrary array so duplicate cards are not created
const clearLibrary = () =>
library.innerHTML = ""
// clears form inputs
const clearForm = () => {
const form = document.querySelector('form')
form.reset()
}
// Creates the look of the card and information that each card displays
function createCard(book) {
const card = document.createElement('div');
card.classList.add('card');
// Adding the remove button and function
const removeBtn = document.createElement('div');
removeBtn.classList.add('remove-btn');
removeBtn.innerText = 'Remove';
card.appendChild(removeBtn);
// Removes card from the array and the display
removeBtn.addEventListener('click', () => {
deleteBook(myLibrary.indexOf(book), card)
})
// Adding the title 
let title = document.createElement('div');
title.classList.add('card-title');
title.innerHTML = `Title: <span>${book.title}</span>`;
card.appendChild(title);
// Adding the author
let author = document.createElement('div');
author.classList.add('card-author');
author.innerHTML = `Author: <span>${book.author}</span>`;
card.appendChild(author);
// Adding the page count
let pages = document.createElement('div');
pages.classList.add('card-count');
pages.innerHTML = `Page Count: <span>${book.pages}</span>`;
card.appendChild(pages);
// Adding the read status
let read = document.createElement('div');
read.classList.add('card-read');
read.innerHTML = `Read Status: <span class="read-status">${book.read === true ? "Read" : "Not read"}</span>`;
card.appendChild(read);
read.addEventListener('click', () => {
myLibrary[myLibrary.indexOf(book)].read = true ? false : true;
clearLibrary()
createStoredCards()
})
library.appendChild(card);
}
// creates a card for each book in the myLibrary array and displays the card in the users library
function createStoredCards() {
myLibrary.forEach(book => {
createCard(book);
})
}
// function that removes book
function deleteBook(bookIndex, card) {
myLibrary.splice(bookIndex, 1);
card.remove();
}
// Open and close modal form
const addBookBtn = document.querySelector('.add-btn');
const modal = document.querySelector('.modal');
const closeBtn = document.querySelector('.close-modal');
addBookBtn.addEventListener('click', () => {
modal.style.display = "flex";
})
const closeModal = () => modal.style.display = 'none'
window.addEventListener('click', (e) => {
if (e.target == modal) {
closeModal();
}
})
closeBtn.addEventListener('click', () => {
closeModal();
})

Answer 1

问题出在三元条件运算符中，这里是：

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

当您编写...read = true ? false : true时，会发生以下情况：

1. 这是一个赋值语句(=(，因此它将计算赋值运算符的所有值
2. 然后是三元条件运算符。它是这样工作的：

• 它检查?(称为条件(之前的表达式是否计算为true或false
• 如果条件的求值结果为true(请参阅truthy(，则三元表达式的结果是:之前的结果
• 如果条件求值为false(请参见falsy(，则三元表达式的结果为:之后的结果

3. 在您的情况下，它是true ? false : true。这里的条件只是常数true，它总是计算为true。因此，三元表达式的结果将始终为false，并且在每次单击时都会将其指定给.read属性

若要修复代码，必须在条件表达式内部检查.read是否正确。像这样：

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

但实际上，你正在做的手术是一种非常常见的手术，被称为"；切换"；。为了切换布尔值，您只需要否定(!(是当前值(如果执行!true，则获得false，反之亦然(。

wasRead = myLibrary[myLibrary.indexOf(book)].read
myLibrary[myLibrary.indexOf(book)].read = !wasRead

此外，我看不出这个大表达式通过获取库上的索引来获得book的.read性质的意义。您已经有一个对图书对象的引用！为什么不只是这个？

book.read = !book.read