javascript - 如何循环动态生成的按钮并相应地创建输入字段

Question

如何循环遍历动态生成的按钮，这些按钮对于某些具有相同的 Id，而对于另一些具有不同的 Id，并根据按钮的数量创建具有值的输入字段。

所有按钮都具有相同的类名，以便我们可以使用它来循环它们。

例如 ：

我在页面上有 5 个动态生成的按钮，

3 具有相同的 ID，如“55”，

其余 2 个 ID 彼此不同，如“14”和“7”。

所以在这里它必须创建 3 个按钮。

动态创建的按钮 1 (Id = 55) 的值必须为 3（因为有 3 个按钮的 ID 为 55）

动态创建的按钮 2 (Id = 14) 的值必须为 1（因为只有 1 个按钮的 ID 为 14）

动态创建的按钮 3 (Id = 7) 的值必须为 1（因为只有 1 个按钮的 ID 为 7）

（我知道 Id 必须是唯一的，但我只是发现它是这样的，所以我只是将应用程序维护了几个月，添加了 2 个新功能，正如高级架构师开发人员告诉我的那样，我不允许触摸其他任何东西）

("#btn-save").click(function () {

    var count = 0;

    // Loop over the Id of all these buttons
    $("#btn-add-vehicle-item").each(function () {

        $("<input class='" + btn-class + "' value='" + myvalue + "' name='VehicleInvoice[" + count + "].VehicleSold' type='hidden' />").insertAfter('#main_div');
        
        count++;
        
    });

});

PS：我正在处理多对多关系，并且在键值端的联合表中不能有多个相同的 Id，EF Core 给出此错误实体类型“pppp”的实例无法跟踪，因为另一个实例与表的键值相同... 这就是为什么我在联合表中添加了一行Quantity Sold来保存项目编号。我在这里关注这个 MS Access 教程

标签： javascriptc#jqueryasp.net-mvc

Answer 1

ID 应该是唯一的。改用data-*属性。并指示您的高级架构师应该解决这些问题。

data-这是一个带有“五个按钮”的示例，但让我们看看如何使用适当的属性来处理该任务：

const ELNew = (tag, prop) => Object.assign(document.createElement(tag), prop);
const ELS_buttons = document.querySelectorAll("button[data-id]");
const IDS_count = [...ELS_buttons].reduce((ob, el) => {
  if (!ob[el.dataset.id]) ob[el.dataset.id] = 1;
  else ob[el.dataset.id]++;
  return ob;
}, {}); // Will give us something like: {"7": 1, "14": 1, "55": 3}

const ELS_inputs = Object.entries(IDS_count).reduce((DF, [k, v], i) => {
  DF.append(ELNew("input", {
    class: "my-hidden-input",
    title: `Index: ${i} Vehicle ID: ${k} Value: ${v}`,
    value: v,
    name: `VehiculeInvoice[${i}].VehiculeSold`,
    // hidden: true
  }))
  return DF;
}, new DocumentFragment);

document.querySelector("#mainDiv").append(ELS_inputs);

#mainDiv {padding:10px background: #eee;}

<!-- Dynamically generated buttons example -->
<button data-id="55" type="button">55</button>
<button data-id="14" type="button">14</button>
<button data-id="7" type="button">7</button>
<button data-id="55" type="button">55</button>
<button data-id="55" type="button">55</button>

<div id="mainDiv"></div>