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';
  });
}

这是所有内容的总和，要重新创建问题，只需打开和关闭2本书以上，然后删除其中1本书即可。 https://jsfiddle.net/Spawn_Bot/w6j4b8Lh/4/

谢谢！

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.net/k6z08m2q/

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

1 个答案: