我正在为我的网站制作SliderControl,我考虑制作一个对象构造函数,以便我可以重新使用代码,如果我想添加更多的滑块。 (我不想使用jquery UI)
但是我遇到了一个问题,当我grab()
滑块时,它告诉我this.update(event)
不是一个函数。但是update(event)
在被调用之前已经明确定义甚至定义。
var SliderControl = function (container, area, element) {
'use strict';
this.container = container;
this.area = area;
this.element = element;
this.value = 0;
this.active = false;
this.actionWhenActive = false; // Ignore this
};
SliderControl.prototype = {
action: function () {
'use strict';
},
width: function () {
'use strict';
var calcWidth = ((this.value * 100) + '%');
this.element.width(calcWidth);
},
update: function (event) { // Apparently this doesn't exist
'use strict';
if (this.actionWhenActive === true) {
this.action();
}
var direction, percent;
direction = event.pageX - this.container.find(this.area).offset().left;
percent = Math.min(Math.max(direction / this.container.find(this.area).width(), 0), 1.0);
this.value = percent;
this.width();
},
move: function (event) {
'use strict';
if (this.active === true) {
this.update(event);
}
},
grab: function (event) {
'use strict';
console.log('grabbed');
event.preventDefault();
this.active = true;
this.update(event); // The error starts here
},
drop: function (event) {
'use strict';
console.log('dropped');
if (this.active === true) {
this.active = false;
this.action();
}
},
events: function () {
'use strict';
$(document).on('mousemove', this.move);
$(document).on('mouseup', this.drop);
this.area.on('mousedown', this.grab);
}
};
如果您需要测试我的代码,我已将其包含在此处。
https://jsfiddle.net/a38trnk5/1/
这里还有工作代码(在我创建对象构造函数之前的占位符代码)
https://jsfiddle.net/zg3ezgnd/1/
抓住黑点或点击.area
内的任意位置移动滑块。
为什么没有定义this.update
?