Question

我有一个JavaScript函数，该函数可创建2个选择的div。在此函数中，我使用一个计数器来跟踪div的计数。在函数结束时，我增加了这个计数器。我想将尚未增加的计数器的值作为onchange函数的参数给出，因为我在select 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>

Answer 2

我将在不100％理解实际原因的情况下采取行动。也许JS更好的人也可以加入。

说明

关于将计数器传递给onchange函数的方式。在其他任何地方，您传递的内容都没有引号：

"... id='specificationNames"+ counter +"' ..."

但是在您的onchange函数中，您将其保留在字符串中：

"... onchange='changeSpecificationSelects(counter)' ..."

这似乎是在运行时“绑定”计数器变量。

解决方案

JavaScript基本类型按值复制。因此，请像其他地方一样，将其用引号引起来并将其作为变量传递：

"... onchange='changeSpecificationSelects("+ counter +")' ..."

还记得看案例。 C 猎人与 c 猎人。

没有关系，但是由于您是新参与者，因此请看一下jQuery

document.getElementById(...) becomes $("...")

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

2 个答案:

说明

解决方案