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

Posted 2023-04-01

【中文标题】如何循环动态生成的按钮并相应地创建输入字段

【英文标题】：How to loop over dynamically generated buttons and create input field accordingly

【发布时间】：2021-10-04 16:09:54

【问题描述】：

如何遍历动态生成的按钮，这些按钮的某些 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 教程here

【问题讨论】：

但是... 不允许使用相同的 ID。这就是文档中 ID 的用途。为单个元素提供独占选择器权限。如果更多人拥有相同的保险号码或电话号码，会不会很混乱？请阅读更多关于 ID 选择器的信息w3.org/TR/CSS21/selector.html#id-selectors

如果由于某种原因您需要将一些数据存储到元素的属性中，请改用data-* 属性。 developer.mozilla.org/en-US/docs/Learn/HTML/Howto/…

@RokoC.Buljan data-* 可以像我们使用输入表单一样发布数据吗？

（Offtopic）“Vehicule” 拼写错误。

【参考方案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>

【参考方案2】：

这个想法是创建一个唯一 ID 列表：

const mainDiv = document.getElementById("main_div");
/* generating buttons */
const btnClass = "test";
for(let i = 0; i < 10; i++)

  const button = document.createElement("button");
  button.id = Math.floor(Math.random() * 6 + 1);
  button.className = btnClass;
  button.textContent = "id" + button.id;
  mainDiv.appendChild(button);


/* get all buttons */
const buttons = document.querySelectorAll("button.test");
const count = ;

//loop through buttons and generate list of unique IDs
for(let i = 0; i < buttons.length; i++)
  count[buttons[i].id] = ~~count[buttons[i].id] + 1; //increase count for each id

// loop through unique IDs.
for(let c in count)

  const input = document.createElement("input");
  input.className = btnClass;
//  input.type = "hidden";
  input.name = "VehiculeInvoice[" + count[c] + "].VehiculeSold";
  input.value = count[c];//myvalue?

  const span = document.createElement("span");
  span.appendChild(input);
  span.dataset.id = c; //this will be displayed from CSS
  mainDiv.appendChild(span);

console.log(count);
/*
$("#btn-save").click(function () 

    var count = 0;

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

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

);
*/

span

  display: block;
  white-space: nowrap;

span:before

  content: "id" attr(data-id) "=";

<div id="main_div"></div>