javascript - 使用创建的 javascript 函数选择带有计数器参数的 onchange

Question

我有一个 javascript 函数，它创建一个具有 2 个选择的 div。在此函数中，我使用计数器来跟踪 div 的计数。在函数结束时，我增加了这个计数器。我想将尚未增加的计数器的值作为 onchange 函数的参数，因为我在选择 id 的末尾添加了该计数器。但是当我更改选择值时，它会使用新的计数器值。

var counter = 1;
function addLine(itemId){

                var specificationsDiv = document.getElementById('specificationsAdding' + itemId);
                var newDiv = document.createElement('div');
                newDiv.innerHTML = "<div><select id='specificationNames"+ Counter +"' onchange='changeSpecificationSelects(counter)'><option>a</option><option>b</option></select><select id='specificationValues"+ Counter +"'><option>a</option><option>b</option></select></div>";
                specificationsDiv.appendChild(newDiv);
                counter++;
}

因此，当我使用按钮调用此函数并更改选择时，它使用 2 作为 onchange 的参数，因此我无法获得选择的正确 ID。如何将此计数器的旧值作为 onchange 的参数？

我不能使用 this.id 因为在第一个选择的 onchange 中我需要获取我创建的第一个选择和第二个选择的 id。

Answer 1

您有两个选择:

您可以继续沿着您要去的路线走。您可以生成一个带有数字文字的 JS 字符串，而不是动态生成包含对全局变量的引用的 JS 字符串。

...但不要这样做。这将使代码更难维护。

相反，使用标准 DOM 方法生成 DOM(而不是构建 HTML 字符串，然后使用 innerHTML 将其转换为 DOM)。使用 addEventListener 添加事件监听器，并使用闭包捕获当前值。

var counter = 1;

function addLine(itemId) {

  var specificationsDiv = document.getElementById('specificationsAdding' + itemId);
  var newDiv = document.createElement("div");
  var select = document.createElement("select");
  ['a', 'b', 'c'].forEach(function(letter) {
    var option = document.createElement("option");
    option.appendChild(document.createTextNode(letter));
    select.appendChild(option);
  });
  select.addEventListener("change", changeSpecificationSelectsFactory(counter));
  newDiv.appendChild(select);
  specificationsDiv.appendChild(newDiv);

  counter++;
}

function changeSpecificationSelectsFactory(value) {
  function changeSpecificationSelects() {
    alert(value);
  }
  return changeSpecificationSelects;
}

addLine(1);
addLine(1);
addLine(1);

<div id="specificationsAdding1"></div>