在onclick上循环提示

Question

所以我有一个php文件将MySQL中的内容循环到不同的div中。并且每个div的id都为"name".$j++。我在循环中放了一个按钮，只要它点击一个提示显示就会显示。每个按钮的id都为"button".$i++.我希望提示框中的输入显示在div的末尾。 （每个div都不同。）

使用我当前的代码我只能在每个div的末尾显示一个输入。当我尝试向div1添加第二个时，它会自动转到div2，依此类推......

JS

var n = (<?php echo $i; ?>);
for(var i=0; i<=n; i++){
for(var j=0; j<=n; j++){


document.getElementById("button"+i).onclick = function() {
    var money;
    money = prompt("Write something here:");
    if(money === null){
        return;
    }else{
        $("<p> " + money + "</p>").appendTo("#div"+ j++);
    }
}
}}

图片

Answer 1

从我所看到的，MySQL循环与手头的问题无关，j中的变量appendTo("#div"+ j++)的值是在循环外的范围，所以不是你所期望的onclick函数被触发的时间。

因此，单个循环用于为每个div /按钮组设置onclick事件，bind函数方法用于将当前范围锁定到传递给onclick事件处理程序的匿名函数中（因此锁定当前值j），并将j（以jj的形式）传递给该函数。

for(var j=1; j<=n; j++){
  document.getElementById("button"+j).onclick = function(jj) {
    var money;
    money = prompt("Write something here:");
    if(money === null){
        return;
    }else{
        $("<p> " + money + "</p>").appendTo("#div"+ jj++);
    }
  }.bind(this, j);
}

在这里演示：http://jsfiddle.net/BloodyKnuckles/xc0La8ov/