javascript - 使用JavaScript添加订单项时，如何处理HTML元素ID和Javascript引用？

首先，我阅读了所有听起来有些相关的建议问题，但都没有找到解决我问题的方法。第二，如果已经解决了某个问题，我对此的搜索不够。最后，解决问题。 ：D

我的页面上有一个“订单项”。就我们的目的而言，“订单项”只是水平行中的一堆HTML元素，这些HTML元素形成了一行HTML输入（例如，想象诸如“件数”，“描述”，“重量”，“单位费率”，“总费率”之类的列）。我们订单项中的HTML控件之一实际上是一个自定义服务器控件，该控件发出一些Javascript。除其他外，JavaScript将X类型的对象更新为：

var whatever = new X(constructor values);

现在，用户可以使用“添加”按钮添加订单项。目前，我只是克隆构成订单项的HTML的干净副本。这还将克隆Javascript代码，以便现在每个订单项都具有var whatever = new X(constructor values);。这就带来了一个问题，就是有几行都引用同一Javascript变量（即whatever）。

当然，这破坏了我需要引用每个whatever的所有实例作为单独的实例，而不是同一实例。我想知道是否有处理这种情况的方法。如何使用自定义服务器控件，但仍引用每一行发出的Javascript？或者如何避免这种问题的方式创建新的订单项？

我是整个使用Java进行DOM修改的新手，我似乎找不到任何有用的最佳实践或示例，因此我有点茫然。

这一切有意义吗？如果没有，请让我知道不可以的地方，我会尽力清除。

编辑：这是一个小代码示例。

这正是JavaScript对象声明的样子：

var example = new SmartDropDown('uomSDD','75','1','7','','','','',2);

第一个参数是呈现的元素之一的HTML ID，由于这个原因，我不能只使用数组（如答案中所述；一个很棒的答案，但是，直到我意识到我忘了提及该细节）。我需要想出一种方法来更改ID和使用数组。

SmartDropDown对象上的某些方法是ShowOptions，HideOptions，BindOptions。

至于单击按钮时调用的代码，这里是：

function AddLineItem()
{
    var lineItemsParent = $("lineItems");
    var newRow = lineItemTemplateNode.cloneNode(true);
    lineItemsParent.appendChild(newRow);
}

因此，总而言之，订单项HTML包含通常的内容：输入，选择，跨度等，然后是上面列出的JS声明。而且由于我添加新订单项的方式（使用上面的代码），JS变量也被克隆了。我需要一种方法来1）更改元素的ID和2）跟踪所有JS引用（已经建议使用数组）。

最佳答案

使用数组？

   var lineItems = [];
   ...
   // when the button is clicked
   lineItems[lineItems.length] = new X(constructor values);

如果您需要同时生成一个新的ID，则可以在数组索引前添加一个字符串。

   var lineItems = [];
   ...
   // when the button is clicked
   var id = 'item_' + lineItems.length.toString()
   lineItems[lineItems.length] = new X(id, ...);