具有多个元素的 classList.toggle 问题

Question

I am currently trying to style a series of buttons so that when clicked they change to a different style and the text content also changes. It is working except that when I click the another button with the same class, the other button loses its classList toggle. It all works until I press the button on the next element, and would need them to work independently since they are being used to mark whether the book has been read or not.

 const readButtons = document.querySelectorAll(".book__read-button"); readButtons.forEach((readButton) => { let clickCount = 0; readButton.addEventListener("click", (e) => { readButtons.forEach((f) => f != e.target ? f.classList.remove("clicked") : "" ); e.target.classList.toggle("clicked"); clickCount += 1; if (clickCount % 2 == 0) { readButton.textContent = "Unread"; } else { readButton.textContent = "Read"; } }); });

 .book__read-button.clicked { background-color: green; border: 2px solid var(--teal-200); }

 <ul class="booklist"> <li class="book"> <span class="book__info">The Catcher in the Rye | JD Salinger | 277 Pages</span> <button class="book__read-button">Unread</button> <button type="button" class="book__delete-button"> </button> </li> <li class="book"> <span class="book__info">Maid | A.Sommer | 277 Pages</span> <button class="book__read-button">Unread</button> <button type="button" class="book__delete-button"></button> </li> <li class="book"></li> </ul>

Answer 1

You can assign an eventListener to each button and trigger a function to handle the toggle classList and the button textContent, try this:

 const readButtons = document.querySelectorAll(".book__read-button"); readButtons.forEach(readButton => { readButton.addEventListener("click", e => bookReaded(e)); }); function bookReaded(event) { console.log(event.target); event.target.classList.toggle('clicked'); event.target.textContent = event.target.textContent == 'Unread' ? 'Read' : 'Unread'; }

 .book__read-button.clicked { background-color: green; border: 2px solid var(--teal-200); }

 <ul class="booklist"> <li class="book"> <span class="book__info">The Catcher in the Rye | JD Salinger | 277 Pages</span> <button id="the-catcher" class="book__read-button">Unread</button> </li> <li class="book"> <span class="book__info">Maid | A.Sommer | 277 Pages</span> <button id="maid" class="book__read-button">Unread</button> </li> <li class="book"></li> </ul>