onclick 循环提示答案

【问题标题】：Looping prompt on onclickonclick 循环提示
【发布时间】：2015-03-08 08:51:26
【问题描述】：

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

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

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++);
    }
}
}}

图片

【问题讨论】：

我很困惑为什么你在一个循环中有一个循环。假设 n 是 10。这意味着您将循环通过您的 onclick 代码 100 次，覆盖每个 10 次。
因为我的 div（在 php 中）循环总是有 +1 和我的按钮，所以我想在我的 js 中我应该循环按钮总是得到 +1 和 div加一，但由于 div != button 他们应该有不同的变量。否则我只能通过一个按钮打开提示。我想不出任何其他方法来做到这一点......
我认为查看您想要的 HTML 输出会有所帮助。
我认为 MySQL 循环与手头的问题无关，并且我认为在触发 onclick 时需要一个闭包来维持所需的 div 索引。
你是说我应该从 php 循环中的 div id 的末尾删除 $i++ 和 $j++，还是我不应该关心它们？对不起，我现在有点困惑......

标签： javascript for-loop prompt

【解决方案1】：

据我所知，MySQL 循环与手头的问题无关，appendTo("#div"+ j++) 中的变量 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/

【讨论】：