2

这是我的代码无法正常工作：

$(document).ready(function() {
    for (var i = 0; i < 3; i++) {
        var bt = new HrButton("btn" + i);                    
        bt.setOnclick(function() {
            alert(bt.name + " clicks = " + bt.cntClick);
            bt.cntClick = bt.cntClick + 1;
        });
        $("#container").append(bt.toHtml());
    }
});

如何bt在函数内维护三个实例。就目前而言，在每个 onclick 中都是bt指。btn2

4

1 回答 1

5

如果setOnclick实施得很好，您应该可以做到：

bt.setOnclick(function() {
    alert(this.name + " clicks = " + this.cntClick);
    this.onclick = this.cntClick + 1;
});

否则，您需要为每个回调函数创建一个新范围，以便它们各自拥有自己的bt. 一种方法是：

bt.setOnclick(function(bt){
    return function(){
        alert(bt.name + " clicks = " + bt.cntClick);
        bt.onclick = bt.cntClick + 1;
    };
}(bt));

评论回复

要实现 setOnClick 以在回调中this引用相关HrButton（而不是element），您可以使用以下代码（仅适用于现代浏览器，除非您使用 SHIM bind）：

var self = this;
self.setOnClick = function(fnOnClick) {
    element.onclick = fnOnClick.bind(self);
};

由于您使用的是 jQuery，因此以下代码将是跨浏览器的等效代码：

var self = this;
self.setOnClick = function(fnOnClick) {
    element.onclick = $.proxy(fnOnClick, self);
};

否则这将适用于所有浏览器，没有任何库，并且可读性稍差：

var self = this;
self.setOnClick = function(fnOnClick) {
    element.onclick = function(event) {
        return fnOnClick.call(self, event);
    };
};
于 2013-07-15T17:36:59.083 回答