Progressbar原型中的JavaScript事件处理程序出现未定义的值

我目前正在构建一个JavaScript对象，它创建一个进度条并允许使用某些元素上的点击侦听器来增加进度栏值。
我有一个问题，当我点击一个应增加当前值的按钮时，它说，当我将此值警告给窗口时，值为NaN，我不知道为什么。Progressbar原型中的JavaScript事件处理程序出现未定义的值

这里是我的代码：

//Progress Bar 
var ProgressBar = function(element, startVal, endVal, step, addLefts, addRights) { 
    this.element = element; 
    this.endVal = endVal; 
    this.currentVal = startVal; 
    this.step = step; 
    this.addLefts = addLefts; 
    this.addRights = addRights; 
    var self = this;  
} 

ProgressBar.prototype.initializeProgressBar = function() { 
    jQuery(this.element).progressbar({ 
     value : this.currentVal 
    }); 
    for(var i = 0; i < this.addLefts.length; i++) { 
     this.addLefts[i].addEventListener("click", this.removeAmount, false); 
    } 
    for(var i = 0; i < this.addRights.length; i++) { 
     this.addRights[i].addEventListener("click", this.addAmount, false); 
    } 
} 

ProgressBar.prototype.addAmount = function() { 
    this.currentVal += this.step;  
    alert(this.currentVal); 
} 

ProgressBar.prototype.removeAmount = function() { 
    this.currentVal -= this.step; 
    alert(this.currentVal); 
}

和代码来创建对象的实例

var addLefts = document.getElementsByClassName("btn-left"); 
var addRights = document.getElementsByClassName("btn-right"); 
var progressBar = new ProgressBar("#progress-bar", 0, jQuery(".signup-part").length, 1, addLefts, addRights); 
progressBar.initializeProgressBar();

为什么是“this.currentVal”属性从addAmount和removeAmount函数中返回的NaN ？

来源

2014-11-04 devoncrazylegs

这意味着要么的'this.currentVal + = this.step'或'this.currentVal - = this.step'导致了问题..检查值和this.currentVal'和''类型this.step'在操作 – 2014-11-04 10:17:02

之前，您将失去“this”。放一个console.log（this）;在功能的开始处... – 2014-11-04 10:18:47

当您添加或this.addAmount为this.removeAmount偶数t处理程序，它将在元素的上下文中调用，而不是ProgressBar实例。

要解决此问题，您可以使用bind()强制它在正确的上下文中调用。

for(var i = 0; i < this.addLefts.length; i++) { 
    this.addLefts[i].addEventListener("click", this.removeAmount.bind(this), false); 
}

来源

2014-11-04 10:24:19 Scimonster

你需要，如果你使用的东西，你这个绑定到你的函数...

this.addRights[i].addEventListener("click", this.addAmount.bind(this), false);

喜欢强调你可以做一些更棘手，有一个： -

ProgressBar.prototype.change = function(sign) { 
    this.currentVal += (this.step * sign); 
}

然后： -

this.addLefts[i].addEventListener("click", _.partial(this.change,-1).bind(this), false); 
this.addRights[i].addEventListener("click", _.partial(this.change, 1).bind(this), false);

来源

2014-11-04 10:24:09

Progressbar原型中的JavaScript事件处理程序出现未定义的值

回答

相关问题