如何防止模态事件监听器影响其他项目？

Question

我目前正在开发一个图书馆应用，用户可以跟踪未读和已读的书籍。我的设置是，当你点击一本书时，会弹出一个模态，包括书名、作者和按钮，允许你将这本书标记为已读或完全删除。

我试图解决一个问题，即打开和关闭一个以上的模态，然后点击删除按钮会删除你之前点击的所有项目。

下面是删除功能--------------------------------------------------。

Book.prototype.delete = function() {
  myLibrary = myLibrary.filter((e) => {
    return e !== this;
  });
};

下面是我打开每个模态的方法----------。

const render = () => {
  const booksUnreadList = document.getElementById('unread');
  const booksReadList = document.getElementById('read');

  booksUnreadList.innerHTML = 'Unread';
  booksReadList.innerHTML = 'Read';

  myLibrary.forEach((book) => {
    const li = document.createElement('li');
    li.className = 'book';

    book.read === 'Read'
      ? booksReadList.appendChild(li)
      : booksUnreadList.appendChild(li);

    li.innerHTML = book.info();
    li.addEventListener('click', function handler() {
      openBookModal(book);
    });
  });

然后是模式本身 -

function openBookModal(book) {
  document
    .getElementById('book-modal-mark-complete')
    .removeEventListener('click', markReadHandler);
  document
    .getElementById('book-modal-delete')
    .removeEventListener('click', deleteHandler);

  bookForm.style.display = 'none';
  toggleForm.style.backgroundColor = '#978de0';
  toggleForm.innerHTML = 'Add Book';

  const bookModal = document.getElementById('book-modal');
  bookModal.style.display = 'grid';

  document.getElementById('book-modal-title').innerHTML = book.title;
  document.getElementById('book-modal-author').innerHTML = 'By ' + book.author;

  document
    .getElementById('book-modal-mark-complete')
    .addEventListener('click', markReadHandler);
  function markReadHandler() {
    book.read = 'Read';
    render();
    bookModal.style.display = 'none';
  }

  document
    .getElementById('book-modal-delete')
    .addEventListener('click', deleteHandler);
  function deleteHandler() {
    book.delete();
    render();
    bookModal.style.display = 'none';
  }

  document.getElementById('book-modal-close').addEventListener('click', () => {
    bookModal.style.display = 'none';
  });
}

这里有一个jsfiddle的一切，要重新创建问题只要打开和关闭2本以上的书，然后删除其中的1本。https:/jsfiddle.netSpawn_Botw6j4b8Lh4。

谢谢！我目前正在开发一个图书馆应用，用户可以跟踪未读和已读的书籍。

Answer 1

你可以将当前选择的书存储在 currentBook 变量，将模态事件处理程序移到外部的 openBookModal() 函数，而在事件处理程序中，你可以删去 currentBook:

let currentBook = {};

...

function openBookModal(book) {
    currentBook = book;
    ...
}
document
  .getElementById('book-modal-mark-complete')
  .addEventListener('click', markReadHandler);

function markReadHandler() {
  currentBook.read = 'Read';
  render();
  bookModal.style.display = 'none';
}

document
  .getElementById('book-modal-delete')
  .addEventListener('click', deleteHandler);

function deleteHandler() {
  currentBook.delete();
  render();
  bookModal.style.display = 'none';
}

这是演示。https:/jsfiddle.netk6z08m2q