jQuery 输入字段 .val() 未定义

Question

我遇到了一个错误问题：jQuery input val() is undefiend。 我有 3 个输入，它们指的是一个项目。

在添加行时，我可以添加一个新项目（3 行）。

所有这些行都必须在数组中准备好才能发送到 PHP 文件。

我相信我的id="item[0]['name']"是错误的。

 $(document).ready(function() { var counter = 1; $("#addRow").click(function() { $("#ItemContainer").append(` <div class="item"> <div><input type="text" id="item[${counter}]['name']" placeholder="Name" ></div> <div><input type="text" id="item[${counter}]['amount']" placeholder="Amount" ></div> <div><input type="text" id="item[${counter}]['count']" placeholder="Count" ></div> <div></div> </div> `); counter = counter + 1; }); $("#setKasse").click(function() { for (let i = 0; i <= (counter - 1); i++) { console.log($(`#item[${i}]`)); console.log($(`#item[${i}]["name"]`).val()); }; }); });

 *{ padding: 0; margin: 0; } body{ background-color: #E6E6FA; color : #191970; padding-left : 5%; padding-top : 70px } #Container, #ItemContainer, .item { width: 20%; display: grid; grid-template-columns: 1fr; grid-template-rows: auto; row-gap : 18px; } #ItemContainer, .item{ width: 100%; row-gap : 2px; } input{ height: 30px; width: 100%; border: none; box-sizing: border-box; padding-left: 4px; font-size: 14px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="Container"> <div><button id="addRow"> Add Row </button></div> <div id="ItemContainer"> <div class="item"> <div><input type="text" id="item[0]['name']" placeholder="Name" ></div> <div><input type="text" id="item[0]['amount']" placeholder="Amount" ></div> <div><input type="text" id="item[0]['count']" placeholder="Count" ></div> <div></div> </div> </div> <div><button id="setKasse"> Set Kasse </button></div> </div>

所以，我想要一种能够循环和循环到对象|数组的方法

我的主要目标是通过 Ajax Post 请求发送数据，为此我想以另一种格式重构数组。

Answer 1

在选择器中， [用于表示属性选择器。 如果要将其用作 ID 中的文字字符，则需要使用反斜杠对其进行转义。 您还需要转义'字符。

您还需要包含 ID 的['name']部分（或者['amount']或['count']如果您想获得这些输入）。

 $(document).ready(function() { var counter = 1; $("#addRow").click(function() { $("#ItemContainer").append(` <div class="item"> <div><input type="text" id="item[${counter}]['name']" placeholder="Name" ></div> <div><input type="text" id="item[${counter}]['amount']" placeholder="Amount" ></div> <div><input type="text" id="item[${counter}]['count']" placeholder="Count" ></div> <div></div> </div> `); counter = counter + 1; }); // end of $("#addRow").click $("#setKasse").click(function() { for (let i = 0; i <= (counter - 1); i++) { console.log($(`#item\\\\[${i}\\\\]\\\\[\\\\'name\\\\'\\\\]`).val()); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="Container"> <div><button id="addRow"> Add Row </button></div> <div id="ItemContainer"> <div class="item"> <div><input type="text" id="item[0]['name']" placeholder="Name"></div> <div><input type="text" id="item[0]['amount']" placeholder="Amount"></div> <div><input type="text" id="item[0]['count']" placeholder="Count"></div> <div></div> </div> </div> <div><button id="setKasse"> Set Kasse </button></div> </div>

在我看来，最好避免在 ID 中使用 CSS 选择器中具有特殊含义的字符，这会不必要地使代码复杂化。 您可以使用id="item-${counter}-name" 。 或者根本不为动态创建的元素使用 ID。 使用class="name"类的class="name" ，然后使用动态索引。 $(".item").eq(i).find("input.name") 。

 $(document).ready(function() { var counter = 1; $("#addRow").click(function() { $("#ItemContainer").append(` <div class="item"> <div><input type="text" class="name" placeholder="Name" ></div> <div><input type="text" class="amount" placeholder="Amount" ></div> <div><input type="text" class="count" placeholder="Count" ></div> <div></div> </div> `); counter = counter + 1; }); // end of $("#addRow").click $("#setKasse").click(function() { for (let i = 0; i < counter; i++) { console.log($(".item").eq(i).find(".name").val()); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="Container"> <div><button id="addRow"> Add Row </button></div> <div id="ItemContainer"> <div class="item"> <div><input type="text" class="name" placeholder="Name"></div> <div><input type="text" class="amount" placeholder="Amount"></div> <div><input type="text" class="count" placeholder="Count"></div> <div></div> </div> </div> <div><button id="setKasse"> Set Kasse </button></div> </div>