Как переключить «добавить» в «element.classList.add», чтобы удалить с помощью javascript

Question

Я пытаюсь использовать одну функцию для добавления и удаления класса, используя javascript. Вместо того, чтобы иметь две почти идентичные функции, я попытался создать функцию, которая принимает действие в качестве аргумента (добавить или удалить), чтобы добавить / удалить класс из элемента.

Когда я передаю аргумент, js, кажется, не распознает его.

Это то, с чем я сейчас работаю:

// function that adds or removes a class
const animateHomeBtn = (axn) => {
    arrowEl.classList.axn('arrow-hover')
    btnTextEl.classList.axn('btn-text-hover')
}

// event listener to add a class when mouse hovers an element
    heroBtn.addEventListener('mouseenter', () => animateHomeBtn(add))
})

// event listener to remove a class when mouse move out of element
    heroBtn.addEventListener('mouseenter', () => animateHomeBtn(remove))
})

Answer 1

Чтобы исправить это:

1. Передать строку в animateHomeBtn как:

   heroBtn.addEventListener('mouseenter', () => animateHomeBtn('add'))
   heroBtn.addEventListener('mouseleave', () => animateHomeBtn('remove'))
   

2. Затем обновить animateHomeBtn как :

   const animateHomeBtn = (axn) => {
      arrowEl.classList[axn]('arrow-hover')
      btnTextEl.classList[axn]('btn-text-hover')
   }
   

или, вы можете просто использовать .toggle(className) как:

heroBtn.addEventListener('mouseenter', animateHomeBtn)
heroBtn.addEventListener('mouseleave', animateHomeBtn)

const animateHomeBtn = () => {
   arrowEl.classList.toggle('arrow-hover')
   btnTextEl.classList.toggle('btn-text-hover')
}

• Метод .toggle() используется для переключения между добавлением и удалением имени класса из элемента с JavaScript.