我正在嘗試使用本地存盤為圖書館應用程式存盤書籍。我正在嘗試實作洗掉功能，但遇到了問題。當我單擊 UI 中的按鈕洗掉條目時，它會從本地存盤中洗掉隨機書籍，而不是我要洗掉的單本書。在 UI 中，正確的書被洗掉了，但在本地存盤中，它的行為不像我預期的那樣。我很感激我能得到的任何幫助。下面是我的代碼：
// Book Class
class Book {
constructor(title, author, pages, bookRead) {
this.title = title;
this.author = author;
this.pages = pages;
this.bookRead = bookRead;
}
}
//Library Class
class Library {
static showBook = () => {
const bookList = UserStorage.getBooks();
bookList.forEach((book) => Library.addBook(book))
}
static addBook = (book) => {
const displayArea = document.querySelector('.displayArea');
let newBook = document.createElement('div');
newBook.classList.add('newEntry');
let newTitle = document.createElement('div')
newTitle.classList.add('newTitle', 'cardItem');
newBook.appendChild(newTitle);
newTitle.textContent = `Title: ${book.title}`
let newAuthor = document.createElement('div')
newAuthor.classList.add('newAuthor', 'cardItem');
newBook.appendChild(newAuthor);
newAuthor.textContent = `Author: ${book.author}`
let newPages = document.createElement('div')
newPages.classList.add('newPages', 'cardItem');
newPages.textContent = `Pages: ${book.pages}`
newBook.appendChild(newPages);
const bookRead = document.querySelector('.hasRead').checked;
let readSection = document.createElement('button')
readSection.classList.add('readToggle')
if(bookRead == true){
readSection.textContent = 'Read';
} else {
readSection.textContent = 'Not Read';
}
newBook.appendChild(readSection);
const deleteBtn = document.createElement('button');
deleteBtn.classList.add('deleteBtn');
deleteBtn.textContent = 'X';
newBook.appendChild(deleteBtn);
displayArea.appendChild(newBook);
}
static clearInput = () => {
document.querySelector('.title').value = '';
document.querySelector('.author').value = '';
document.querySelector('.pages').value = '';
document.querySelector('.hasRead').value = '';
}
static deleteBook = (item) => {
if(item.classList.contains('deleteBtn')) {
item.parentElement.remove()
}
}
static toggleBookRead = (button) => {
if(button.classList.contains('readToggle')) {
if(button.textContent === 'Read') {
button.textContent = 'Not Read'
} else if (button.textContent === 'Not Read') {
button.textContent = 'Read'
}
}
}
}
// Local Storage Class
class UserStorage {
static getBooks = () => {
let booksInStorage;
if(localStorage.getItem('booksInStorage') === null) {
booksInStorage = [];
} else {
booksInStorage = JSON.parse(localStorage.getItem('booksInStorage'));
}
return booksInStorage;
}
static addBook = (book) => {
const currentBookList = UserStorage.getBooks();
currentBookList.push(book);
localStorage.setItem('booksInStorage', JSON.stringify(currentBookList));
}
static removeBook = (title) => {
const currentBookList = UserStorage.getBooks();
currentBookList.forEach((book, index) => {
if(title === title) {
currentBookList.splice(index, 1);
}
})
localStorage.setItem('booksInStorage', JSON.stringify(currentBookList));
}
}
// Display book in library
document.addEventListener('DOMContentLoaded', Library.showBook)
// Toggle Add Button
const addButton = document.querySelector('.addBtn');
addButton.addEventListener('click', () => {
addButton.style.display = 'none';
document.querySelector('.addBook').style.display = 'block';
})
// Close Form Button
const closeBtn = document.querySelector('.closeBtn');
closeBtn.addEventListener('click', () => {
document.querySelector('.addBook').style.display = 'none';
addButton.style.display = 'block';
})
// Add book
document.querySelector('.submitBook').addEventListener('click', (e) => {
e.preventDefault();
const title = document.querySelector('[data-title]').value;
const author = document.querySelector('[data-author]').value;
const pages = document.querySelector('[data-pages]').value;
const bookRead = document.querySelector('.hasRead').checked;
const book = new Book(title, author, pages, bookRead)
// Add Book to UI
Library.addBook(book)
// Add Book to Local Storage
UserStorage.addBook(book);
// Clear Input Fields
Library.clearInput();
})
// Delete Book
document.querySelector('.displayArea').addEventListener('click', (e) => {
e.preventDefault();
Library.deleteBook(e.target);
console.log(e.target.parentElement.firstChild)
UserStorage.removeBook(`${e.target.parentElement.textContent}`)
})
// Mark book as Read/Not Read
document.querySelector('.displayArea').addEventListener('click', (e) => {
e.preventDefault();
Library.toggleBookRead(e.target);
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Library App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<img src="Images/pile_of_books.png" alt="在本地存盤中洗掉錯誤的專案"><h1 >My Library</h1><img src="Images/pile_of_books.png" alt="在本地存盤中洗掉錯誤的專案">
</header>
<main>
<section>
<div >
<h2 >Would you like to add a book to your library?</h2>
<button >Add</button>
<div >
<form >
<button >X</button>
<input data-title type="text" placeholder="Title">
<input data-author type="text" placeholder="Author">
<input data-pages type="number" placeholder="Pages">
<label for="hasRead">
<label >Have you read this book?</label>
<input type="checkbox">
</label>
<button >Submit book?</button>
</form>
</div>
</div>
<div >
</div>
</section>
</main>
<footer>
</footer>
</body>
<script src="script.js" defer></script>
</html>
uj5u.com熱心網友回復：
我認為你不應該從回圈內部操作陣列：
currentBookList.forEach((book, index) => {
if(title === title) {
currentBookList.splice(index, 1);
}
})
如果先找到索引然后使用 splice 會更好：
let index = currentBookList.findIndex((book) => {
if(title === book.title)
{
return true;
}
})
currentBookList.splice(index, 1);
另外，使用book.title代替title === title
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/343822.html
標籤：javascript 本地存储