dav123
Legacy Member
Ik heb een erg basis start van een plugin gemaakt. De bedoeling is dat hij uitgevoerd kan worden op meerdere elementen.
Het probleem is echter dat wanneer ik 2 instanties maak, de console.log(self.options.name); telkens naar de "name" waarde van de 2de instantie linkt bij het uitvoeren van de click event...
Bij de klik op zowel de #size1 als #size2 div, wordt in de console "item2" geprint, wat niet de bedoeling is...
Weet iemand wat het probleem hier juist is?
Het probleem is echter dat wanneer ik 2 instanties maak, de console.log(self.options.name); telkens naar de "name" waarde van de 2de instantie linkt bij het uitvoeren van de click event...
HTML:
function Tooltip(options) {
self = this;
this.options = options;
this.$el = this.options.el;
this.$container = this.options.container;
/*
this.$el = options.el;
this.$el.find('ul').hide();
*/
console.log(this.options.name);
this.show = function() {
console.log('show');
this.$el.show();
}
this.hide = function() {
console.log('hide');
this.$el.hide();
}
this.test = function() {
return this.options.name;
}
this.$container.on('click', function(event) {
event.preventDefault();
console.log(self.options.name);
console.log(self.$container);
/*
console.log(self.$el.is(':visible'));
if (self.$el.is(':visible')) {
self.hide();
} else {
self.show();
}
*/
});
}
var opts = {
el: $('#size .list'),
container: $('#size'),
name: 'item1',
}
tooltip = new Tooltip(opts);
tooltip2 = new Tooltip({
el: $('#size2 .list'),
container: $('#size2'),
name:'item2'
});
console.log(tooltip.test()); //toont item1, OK
console.log(tooltip2.test()); //toont item2, NOK
<div id="size" class="size">
<input type="text" name="test" value="choose your size" class="field" readonly="readonly" />
<ul class="list">
<li>Male - M</li>
<li>Female - M</li>
<li>Male - S</li>
<li>Female - S</li>
</ul>
</div>
<div id="size2" class="size" style="margin-top:200px;">
<input type="text" name="test" value="choose your size" class="field" readonly="readonly" />
<ul class="list">
<li>Male - M</li>
<li>Female - M</li>
<li>Male - S</li>
<li>Female - S</li>
</ul>
</div>Bij de klik op zowel de #size1 als #size2 div, wordt in de console "item2" geprint, wat niet de bedoeling is...
Weet iemand wat het probleem hier juist is?