Saat ini saya sedang mengerjakan aplikasi Perpustakaan tempat pengguna dapat melacak buku yang belum dibaca dan dibaca. Saya telah mengaturnya di mana ketika Anda mengklik sebuah buku, sebuah modal muncul dengan judul, penulis, dan tombol yang memungkinkan Anda untuk menandai buku itu sebagai telah dibaca atau menghapusnya sepenuhnya.

Saya mencoba memperbaiki masalah di mana membuka dan menutup lebih dari satu modal dan kemudian mengklik tombol hapus akan menghapus semua item yang sebelumnya Anda klik.

Inilah fungsi hapus -

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

Inilah cara saya membuka setiap modal -

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

Dan kemudian modal itu sendiri -

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

Inilah jsfiddle dari semuanya, untuk membuat ulang masalah cukup buka dan tutup 2+ buku dan kemudian hapus 1 di antaranya. https://jsfiddle.net/Spawn_Bot/w6j4b8Lh/4/

Terima kasih!

0
SpawnBot 23 April 2020, 08:07

1 menjawab

Jawaban Terbaik

Anda dapat menyimpan buku yang saat ini dipilih dalam variabel currentBook, memindahkan modal event handler di luar fungsi openBookModal() dan di event handler Anda dapat menghapus 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';
}

Berikut demonya: https://jsfiddle.net/k6z08m2q/

0
Sebastian Kaczmarek 23 April 2020, 05:32