在 for 循环中创建多个 onclick 事件

Question

我有多个 ID 为"especifica-i-pj"按钮，其中 i 从 1 变为 4，j 从 1 变为 3。想法是为每个按钮分配一个onclick事件，而不必声明 12 个函数. 我认为这会解决我的问题：

for ( i = 1; i <= 4; i++ ) {
    for ( j = 1; j <= 3; j++ ) {
        dom_id = "especifica-"+i.toString()+"-p"+j.toString();
        document.getElementById(dom_id).onclick = function() {
            console.log("you clicked ",dom_id)
            ponder[i-1] = 0.1 + 0.05*(j-1);
            console.log("ponder:",i,ponder[i-1])
            $("#"+dom_id).addClass("active");
            for ( k = 1; k <= 3 && k != j; k++ )
                $("#especifica-"+i.toString()+"-p"+k.toString()).removeClass("active");
        }
    }
}

但是，每次单击任何按钮时，我的控制台都会输出我单击especifica-4-p3 （最后一个按钮）并输出 ponder ponder: 5 0.25 ，当i==5时应该不可能，因为外部 for 到达i==4 。

我能做些什么来完成这项工作？ 我一直在网上搜索，但我没有找到任何关于此的内容，甚至没有在 for 循环中声明函数。 谢谢。

Answer 1

简单的方法是执行以下操作之一：

1. 将 i 和 j 的值存储在 DOM 元素上。
2. 解析点击的 id 得到 i 和 j 的值。
3. 将 i 和 j 的值分配给非全局变量，以便您以后可以检索它们。

方法一：

for(i=1; i<=4; i++) {
  for(j=1; j<=3; j++) {
    dom_id = "especifica-"+i.toString()+"-p"+j.toString();
    element = document.getElementById(dom_id);
    element.i = i;
    element.j = j;
    element.onclick = function() {
      console.log("you clicked ",dom_id)
      ponder[this.i-1] = 0.1 + 0.05*(this.j-1);
      console.log("ponder:",this.i,ponder[this.i-1])
      $("#"+dom_id).addClass("active");
      for(k=1; k<=3 && k!=j; k++)
        $("#especifica-"+this.i.toString()+"-p"+k.toString()).removeClass("active");
    }
  }
}

方法二：

for(i=1; i<=4; i++) {
  for(j=1; j<=3; j++) {
    dom_id = "especifica-"+i.toString()+"-p"+j.toString();
    document.getElementById(dom_id).onclick = function() {
      i = dom_id.substring(11,12);
      j = dom_id.substring(14,15);
      console.log("you clicked ",dom_id)
      ponder[i-1] = 0.1 + 0.05*(j-1);
      console.log("ponder:",i,ponder[i-1])
      $("#"+dom_id).addClass("active");
      for(k=1; k<=3 && k!=j; k++)
        $("#especifica-"+i.toString()+"-p"+k.toString()).removeClass("active");
    }
  }
}

方法三：

for(i=1; i<=4; i++) {
  let i1 = i;
  for(j=1; j<=3; j++) {
    let j1 = j;
    dom_id = "especifica-"+i.toString()+"-p"+j.toString();
    document.getElementById(dom_id).onclick = function() {
      console.log("you clicked ",dom_id)
      ponder[i1-1] = 0.1 + 0.05*(j1-1);
      console.log("ponder:",i,ponder[i1-1])
      $("#"+dom_id).addClass("active");
      for(k=1; k<=3 && k!=j; k++)
        $("#especifica-"+i1.toString()+"-p"+k.toString()).removeClass("active");
    }
  }
}

Answer 2

最好的方法是捕获第一级父级的点击，这是所有按钮的父级，

仅针对您在单击时创建的内容，

在事件 function 内检测event.target ，它将告诉从哪个按钮发生点击

 function buttonClick(event) { alert(event.target.getAttribute("id")); }

 <div id="parent" onclick="buttonClick(event)"> <button id="especifica-1-p1">b11</button> <button id="especifica-1-p2">b12</button> <button id="especifica-1-p3">b13</button> <button id="especifica-2-p1">b21</button> <button id="especifica-2-p2">b22</button> <button id="especifica-2-p3">b23</button> </div>

如果你想维护数据1,1 1,2 ...等，你可以这样做

在每个按钮中，您可以使用自己的名称假设引入虚拟数据属性

例子

<button id="especifica-1-p1" data-row="1" data-column="1">b11</button>
<button id="especifica-1-p2" data-row="1" data-column="2">b12</button>

然后你可以使用 JavaScript

event.target.getAttribute("data-row");
event.target.getAttribute("data-column");

Answer 3

这是使用data-*属性的修复：

 for (var i = 1; i <= 2; i++) { for (var j = 1; j <= 3; j++) { var buttonId = "especifica-" + i + "-p" + j; var button = document.getElementById(buttonId); button.setAttribute("data-i", i); button.setAttribute("data-j", j); button.addEventListener("click", function(event) { console.log("i", event.target.getAttribute("data-i")); console.log("j", event.target.getAttribute("data-j")); console.log("button with id of", event.target.id, "was clicked;"); }); } }

 <div><button id="especifica-1-p1" type="button">especifica-1-p1</button></div> <div><button id="especifica-1-p2" type="button">especifica-1-p2</button></div> <div><button id="especifica-1-p3" type="button">especifica-1-p3</button></div> <div><button id="especifica-2-p1" type="button">especifica-2-p1</button></div> <div><button id="especifica-2-p2" type="button">especifica-2-p2</button></div> <div><button id="especifica-2-p3" type="button">especifica-2-p3</button></div>

在此处了解有关data-*属性的更多信息：

• 使用数据属性

---

或者，您可以利用closures的概念，如下例所示：

 for (var i = 1; i <= 2; i++) { for (var j = 1; j <= 3; j++) { var buttonId = "especifica-" + i + "-p" + j; var button = document.getElementById(buttonId); var createEventListener = function (iValue, jValue) { return function (event) { console.log("i:", iValue, "j:", jValue); console.log("button with id of", event.target.id, "was clicked;"); } }. button,addEventListener("click", createEventListener(i; j)); } }

 <div><button id="especifica-1-p1" type="button">especifica-1-p1</button></div> <div><button id="especifica-1-p2" type="button">especifica-1-p2</button></div> <div><button id="especifica-1-p3" type="button">especifica-1-p3</button></div> <div><button id="especifica-2-p1" type="button">especifica-2-p1</button></div> <div><button id="especifica-2-p2" type="button">especifica-2-p2</button></div> <div><button id="especifica-2-p3" type="button">especifica-2-p3</button></div>

在此处阅读有closures的更多信息：

• 变量scope

此外，使用element.addEventListener方法代替element.onclick 。 看看这里为什么最好使用addEventListener('click', ...)而不是onclick ：

• addEventListener 与 onclick