Передача функции класса в качестве параметра функции на JS

На чтение 3 мин Просмотров 1 Опубликовано 17.09.2024

Содержание

Вопрос или проблема
Ответ или решение
Подробное объяснение:
Примечание:

Вопрос или проблема

Я определил следующую функцию:

function handleMessageDot(fun) {
    domElement.classList.fun('hidden');
}

Теперь я хочу использовать одну из них:
handleMessageDot(add), handleMessageDot(remove).
Я получаю ошибку remove is not defined. Я предполагаю, что это потому, что функции remove() и add() являются методами classList.
Я могу сделать следующее:

function handleMessageDot(domElement, fun) {
    domElement.classList.fun('hidden');
}

но я не хочу этого делать.
Есть ли способ сделать это «по-моему»?

При попытке доступа к свойству объекта с использованием значения отдельной переменной необходимо использовать нотацию массива:

const handleMessageDot = (domElement, fun) => domElement.classList[fun]('hidden');

handleMessageDot(document.querySelector('.hidden'), 'remove');

.hidden {
  display: none;
}

<div class="hidden">
  Lorem ipsum
</div>

Ответ или решение

Ваша задача заключается в том, чтобы передать метод classList в качестве параметра функции, чтобы можно было динамически вызывать методы, такие как add и remove. Вы правильно заметили, что для доступа к методу объекта с использованием имени метода, переданного как строка, необходимо использовать квадратные скобки.

Давайте рассмотрим код, который позволит вам реализовать эту задачу.

Вот пример функции handleMessageDot, которая принимает элемент DOM и имя метода classList в виде строки:

const handleMessageDot = (domElement, fun) => {
    domElement.classList[fun]('hidden');
};

// Пример использования:
handleMessageDot(document.querySelector('.hidden'), 'remove'); // Удаляет класс 'hidden'
handleMessageDot(document.querySelector('.visible'), 'add'); // Добавляет класс 'hidden'

Подробное объяснение:

Объявление функции: Функция handleMessageDot принимает два параметра: domElement — элемент DOM, с которым мы работаем, и fun — строка, представляющая имя метода classList.
Динамический вызов метода: Внутри функции мы используем квадратные скобки domElement.classList[fun], чтобы вызвать метод, имя которого передано в параметре fun. Это позволяет нам динамически вызывать как add, так и remove, в зависимости от переданной строки.
Использование функции: Чтобы использовать функцию, просто передайте соответствующий элемент и имя метода. В приведенном примере document.querySelector('.hidden') находит первый элемент с классом hidden, а затем мы вызываем метод remove, чтобы удалить этот класс. Аналогично, мы можем вызвать add для добавления класса.

Примечание:

Убедитесь, что элемент, который вы передаете в функцию, существует на странице, и что вы вызываете его методы в правильном порядке, чтобы избежать ошибок. Например, если элемент не содержит класс hidden, вызов remove не вызовет ошибку, но также не приведет к изменению.

Таким образом, ваша изначальная задача решена, и вы можете вызывать методы classList динамически, как вы и хотели!