Как изменить функцию лайка в конструкторе класса
Вместо того, чтобы брать элемент лайка из события, можно определить свойство, в котором будет храниться кнопка. Причем определить нужно в методе, который вызывается единожды в течение жизни экземпляра класса(от его создания до уничтожения), чтобы поиск не производится при каждой обработке события:
Подскажите, пожалуйста, как это реализовать на моем проекте, я новичок и запуталась.
Пример.
someMethod1() {
this._element = document.querySelector(...);
}
someMethod2() {
// использование элемента из this._element
}
class Card {
constructor(data, templateSelector, openImagePopup) { // Передаю данные в виде объекта, а в самом классе присвоить полям нужные свойства:
this._name = data.name;
this._link = data.link;
this._openImagePopup = openImagePopup;
this._templateSelector = templateSelector,'#card__template';
}
/** Получить нужную разметку */
_getTemplateCard() {
const cardElement = document
.querySelector(this._templateSelector)
.content
.querySelector('.element')
.cloneNode(true); // Клонирую элемент
return cardElement; // Возвращаю разметку карточки
}
/// Не получается сделать, все окрашивается в черный цвет///
// _likeButton(like) {
// this._element = document.querySelector(like, '.element__like');
// }
// _handleLikeButton(like) {
// like.this._element.classList.toggle('element__like_active');
// }
/////////////
/** Навешиваю слушатель события */
_setEventListeners() {
const deleteCard = this._element.querySelector('.element__delete');
deleteCard.addEventListener('click', () => this._handleDeleteButton())
const likeCard = this._element.querySelector('.element__like');
likeCard.addEventListener('click', (evt) => this._handleLikeButton(evt))
}
generateCard() {
// Запишем разметку в приватное поле _element.
// Так у других элементов появится доступ к ней.
this._element = this._getTemplateCard();
this._setData();
this._setEventListeners();
return this._element;
}
}
Источник: Stack Overflow на русском