Javascript ООП? Добрый день! Пытаюсь изучить ООП javascript на реальный примерах и столкнулся с проблемой. Есть такой код:function Widget(containerSelector) {
this.$container = $(containerSelector);
this.$widgetIco = this.$container.find('.js-box-ico');
this.bindEvents();
}
Widget.prototype.bindEvents = function() {
this.$widgetIco
.on('mouseenter', this.addCell.bind(this))
.on('mouseleave', this.removeCell.bind(this));
};
Widget.prototype.addCell = function() {
// Добавить класс к наведенному элементу.
};
$(function() {
new Widget('.box');
});
Не могу понять, как, к примеру, добавить класс в Widget.prototype.addCell к текущему наведенному мышкой элемменту .js-box-ico?
Javascript ООП? Добрый день! Пытаюсь изучить ООП javascript на реальный примерах и столкнулся с проблемой. Есть такой код:function Widget(containerSelector) {
this.$container = $(containerSelector);
this.$widgetIco = this.$container.find('.js-box-ico');
this.bindEvents();
}
Widget.prototype.bindEvents = function() {
this.$widgetIco
.on('mouseenter', this.addCell.bind(this))
.on('mouseleave', this.removeCell.bind(this));
};
Widget.prototype.addCell = function() {
// Добавить класс к наведенному элементу.
};
$(function() {
new Widget('.box');
});
Не могу понять, как, к примеру, добавить класс в Widget.prototype.addCell к текущему наведенному мышкой элемменту .js-box-ico?
this.$container = $(containerSelector);
this.$widgetIco = this.$container.find('.js-box-ico');
this.bindEvents();
}
Widget.prototype.bindEvents = function() {
this.$widgetIco
.on('mouseenter', this.addCell.bind(this))
.on('mouseleave', this.removeCell.bind(this));
};
Widget.prototype.addCell = function() {
// Добавить класс к наведенному элементу.
};
$(function() {
new Widget('.box');
});
Не могу понять, как, к примеру, добавить класс в Widget.prototype.addCell к текущему наведенному мышкой элемменту .js-box-ico?
Не можешь разобраться в этой теме?
Обратись за помощью к экспертам
Гарантированные бесплатные доработки в течение 1 года
Быстрое выполнение от 2 часов
Проверка работы на плагиат
Поможем написать учебную работу
Чтобы добавить класс к текущему наведенному элементу .js-box-ico в методе Widget.prototype.addCell, вам нужно использовать метод closest() в jQuery для нахождения ближайшего элемента с классом .js-box-ico от элемента, на который наведена мышь.
Ниже приведен исправленный код:
function Widget(containerSelector) {this.$container = $(containerSelector);
this.bindEvents();
}
Widget.prototype.bindEvents = function() {
this.$container.on('mouseenter', '.js-box-ico', this.addCell.bind(this));
this.$container.on('mouseleave', '.js-box-ico', this.removeCell.bind(this));
};
Widget.prototype.addCell = function(event) {
var $widgetIco = $(event.currentTarget); // Находим текущий элемент .js-box-ico
$widgetIco.addClass('your-class'); // Добавляем класс к наведенному элементу
};
Widget.prototype.removeCell = function(event) {
var $widgetIco = $(event.currentTarget);
$widgetIco.removeClass('your-class');
};
$(function() {
new Widget('.box');
});
Теперь при наведении мыши на элемент с классом .js-box-ico добавится класс 'your-class', а при убирании мыши - удалится.