在 IF ELSE 语句的 2 个位置找到了类似的代码块。 考虑重构 JS

Question

if (notesValue) { document.querySelector(`.card-${domain.id} .add-notes-button`).classList.add('notes-filled'); } else { document.querySelector(`.card-${domain.id} .add-notes-button`).classList.remove('notes-filled'); }

Answer 1

The refactoring is simply done by using the second force param of the toggle Method:

Element.classList.toggle("className", forceBoolean)
MDN Docs DOMTokenList.toggle()

const EL_button = document.querySelector(`.card-${domain.id} .add-notes-button`);
EL_button.classList.toggle('notes-filled', notesValue);

Answer 2

document .querySelector(`.card-${domain.id} .add-notes-button`) .classList .toggle('notes-filled', notesValue);

Answer 3

Using toggle is a good idea but for a more general case where a method like that doesn't exist you could choose which method on the object to target eg:

document.querySelector(`.card-${domain.id} .add-notes-button`)
  .classList[notesValue ? 'add' : 'remove']('notes-filled');