在 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

重構只需使用toggle方法的第二個力參數即可完成：

Element.classList.toggle("className", forceBoolean)
MDN 文檔 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

使用切換是一個好主意，但對於不存在這樣的方法的更一般的情況，您可以選擇對象上的哪個方法作為目標，例如：

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