Как правильно вызвать метод внутри класса?
Привет.
Задача: Есть div c id="uid", при наведении на него мышкой - содержимое div'а должно меняться на "Курсор находится на мне!". Если после этого убрать курсор - содержимое должно меняться на "Вы убрали курсор". Реализовать нужно через "класс", без использования глобальных переменных. Вроде бы всё сделал, но никак не получается внутри класса забиндить собитие для элемента, которое бы вызывало один из методов класса. PS: Для биндинга event'ов и операций с DOM - использую jQuery.
<div id="uid">Наведи на меня мышку...</div>
<script>
function MyClass(el) {
this.el = el;
this.privet = "Курсор находится на мне!";
this.poka = "Вы убрали курсор!";
/* Вот тут я пытаюсь забиндить вызов метода класса на убирание курсора с элемента. */
this.el.mouseleave(function() {
this.sayPoka();
});
this.sayPrivet = function() {
this.el.html(this.privet);
}
this.sayPoka = function() {
this.el.html(this.poka);
}
}
$("#uid").mouseenter(function() {
my_class = new MyClass($(this));
my_class.sayPrivet();
});
</script>
Подскажите пожалуйста как лучше сделать? Возможно что-то вообще неправильно делаю, не лучшим образом. Спасибо! |
Цитата:
|
Цитата:
http://docs.jquery.com/Events/mouseenter#fn |
Цитата:
|
Цитата:
Т.е. допустим, у меня 10 таких div'ов и на каждый нужно создать экземпляр получается. Один экземпляр не катит, т.к. в реальной задаче каждый экземпляр класса будет отличаться от другого параметрами, которые будут задаваться при создании класса. |
Нужно 1 экземпляр на 1 элемент, а у вас 1 экземпляр на 1 событие.
|
Цитата:
Я никак не пойму как это сделать без глобальных переменных. |
Примерно так (псевдокод):
var MyClass = function(elem) {
this.elem = $(elem);
var self = this;
Event.add(this.elem, 'mouseover', function() {self.mouseover()});
Event.add(this.elem, 'mouseout', function() {self.mouseout()});
};
MyClass.prototype.mouseover = function() {
this.elem.innerHTML = 'over';
};
MyClass.prototype.mouseout = function() {
this.elem.innerHTML = 'out';
};
$.ready(function() {
new MyClass('div1');
});
|
Цитата:
var self = this;
this.el.mouseleave(function() {
self.sayPoka();
});
А вообще конечно Спасибо, буду экспериментировать! :dance: |
Цитата:
var self = this;
this.el.mouseleave(function() {
alert(self);
alert(self.sayPoka);
self.sayPoka();
});
? |
| Часовой пояс GMT +3, время: 13:39. |