Question

很抱歉没有给出明确的标题，因为我不知道为什么我的脚本不起作用。

var all=[]; 
function People(name){
    this.name=name;
    this.func=function(){alert(this.name)}; 
    all.push(this);
};
var person1=new People('Peter');
for(i=0;i<all.length;i++){
    var newBtn=document.createElement('input');
    document.body.appendChild(newBtn);
    newBtn.type='button';
    newBtn.value=all[i].name;

    newBtn.onclick=all[i].func; // why doesn't is say "Peter" when I click the button ?
};

顺便问一下，有没有更好的方法来实现我的目标：创造一些物体;每个对象，创建一个按钮;单击一个按钮时，执行一些功能。

Answer 1

当您单击按钮时，事件处理程序（this变量）的上下文将成为按钮本身。您只需将console.log(this)放入func即可查看我建议使用以下代码：

for(i=0;i<all.length;i++){
    var newBtn=document.createElement('input');
    document.body.appendChild(newBtn);
    newBtn.type='button';
    newBtn.value=all[i].name;

    newBtn.onclick=all[i].func.bind(all[i]);
};

使用bind()明确将所需的上下文推送到函数中。
More on bind.

Answer 2

试试这个： - http://jsfiddle.net/adiioo7/NCTMD/1/

<强> JS： -

var all=[]; 
function People(name){
    this.name=name;
    this.func=function(){alert(name)}; 
    all.push(this);
};
var person1=new People('Peter');
for(i=0;i<all.length;i++){
    var newBtn=document.createElement('input');
    document.body.appendChild(newBtn);
    newBtn.type='button';
    newBtn.value=all[i].name;

    newBtn.onclick=all[i].func; // why doesn't is say "Peter" when I click the button ?
};

Answer 3

尝试将person对象推送到所有数组

var all=[]; 
function People(name){
    this.name=name;
    this.func=function(){alert(this.name)}; 
};


var person1=new People('Peter');

//push the person objects

all.push(person1);

Answer 4

在第

行

this.func=function(){alert(this.name)};

将

this.name

替换为

name

，因为您将其调用到范围之外，这是不同的（它是按钮 - 对象HTMLInputElement）。

Answer 5

请检查此代码

    $(document).ready(function(){
    var all=[]; 
    function People(name){
        this.name=name;
        this.func=function(){alert(name)}; 
        all.push(this);
    };
    var person1=new People('Peter');

    for(i=0;i<all.length;i++){
        var newBtn=document.createElement('input');
        newBtn.type='button';
        newBtn.value=all[i].name;
        newBtn.onclick=all[i].func;
        document.body.appendChild(newBtn);

    }
});

有一些小错误。 document.body总是传递null。对于该脚本，在document.ready函数之间运行以获取document.body值。

为什么我的功能不正确？

5 个答案: