Question

我正在为我的网站制作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？

在原型返回方法中调用方法不是javascript中的函数

0 个答案: