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

Question

首先，我阅读了所有听起来一半相关的建议问题，但没有找到任何可以解决我的问题的内容。其次，如果这个问题已经在某个地方得到解决，那么我没有进行足够好的搜索。最后，说到问题。 :D

我的页面上有一个“订单项”。对于我们的目的来说，“行项目”只是水平行中的一堆 HTML 元素，它们形成一行 HTML 输入(例如，想象一下“件数”、“描述”、“重量”、“单价”、“总价”等列)。我们的订单项中的 HTML 控件之一实际上是一个发出一些 Javascript 的自定义服务器控件。除其他事项外，Javascript 新闻了一个 X 类型的对象，如下所示:

varwhat = new X(构造函数值);

现在，用户可以使用“添加”按钮添加订单项。目前，我只是克隆形成订单项的 HTML 的干净副本。这还会克隆 Javascript 代码，以便现在每个行项目都有 varwhat = new X(constructorvalues);。这带来了一个问题，因为有几行都引用相同的 Javascript 变量(即 whatever)。

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

我对使用 Javascript 修改 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 引用(已经建议了一个数组)。

Answer 1

使用数组？

   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, ...);