Создать несколько событий onclick внутри цикла for

Question

У меня есть несколько кнопок с идентификаторами "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: 5 0.25, когда i==5 не должно быть возможным, так как внешний метод получает до i==4.

Что я могу сделать, чтобы эта работа работала? Я искал в Интернете, но я не нашел ничего об этом, или даже объявил функции внутри для циклов. Спасибо.

Answer 1

Лучший способ - захватить при нажатии родительский уровень первого уровня, который является родительским для всех кнопок,

Только для того, что вы создаете при нажатии,

внутри функции обнаружения событий 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 ... et c, вы можете сделать это

В каждой кнопке вы можете ввести фиктивные атрибуты данных с вашим собственным предположением имени

Пример

<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 2

Вот исправление с использованием атрибутов 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 здесь:

• Переменная область действия

Также используйте метод element.addEventListener вместо element.onclick. Посмотрите здесь, почему лучше использовать addEventListener('click', ...) вместо onclick:

• addEventListener vs onclick

Answer 3

Самый простой способ - выполнить одно из следующих действий:

1. Сохранить значения i и j в элементе DOM.
2. Разобрать идентификатор, по которому щелкнули, чтобы получить значения i и j.
3. Присвойте значения i и j неглобальным переменным, чтобы вы могли получить их позже.

Метод 1:

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

Метод 2:

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

Метод 3:

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