找到 2 个具有非唯一 ID 的元素

Question

id当我们在两个不同的标签中使用相同的名称时，我收到以下警告form。

[DOM] 找到 2 个具有非唯一 ID 的元素

这是我的 HTML 片段：

               <div class="modal-dialog">

                    <form action="" method="post" id="myid-1" name="myid-1">

                        <input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">

                        <label for="Job_Name">Job Name<span class="text-danger">*</span></label>

                        <button type="submit">Submit</button>

                    </form>

                </div>

                <div class="modal-dialog">

                    <form action="" method="post" id="myid-2" name="myid-2">

                        <input type="text" class="form-control" id="Job_Name" name="Job_Name" required="">

                        <label for="Job_Name">Job Name<span class="text-danger">*</span></label>

                        <button type="submit">Submit</button>

                    </form>

                </div>

如何解决“找到 2 个具有非唯一 ID 的元素”警告？

Answer 1

您需要更改id="Job_Name"为唯一的，id="Job_Name1" id="Job_Name2"例如，因为 ID 在 DOM 中必须是唯一的。当您想使用document.getElementById('Job_Name')或使用 jQuery选择元素时，它会产生冲突$('#Job_Name')，因为您将无法获得具有相同 ID 的第二个或其他元素。您将需要使用 index 和 querySelectorAll ，这将首先破坏使用 Id 的目的。

Answer 2

<input&nbsp;type="text"&nbsp;class="form-control"&nbsp;id="Job_Name"&nbsp;name="Job_Name"&nbsp;required="">您需要为每个输入更改 de&nbsp;id

Answer 3

&nbsp;<input&nbsp;type="text"&nbsp;class="form-control"&nbsp;id="Job_Name"&nbsp;name="Job_Name"&nbsp;required=""&nbsp;>以两种不同的形式复制输入标签您必须为不同的元素使用不同的 id

Answer 4

只需对两个字段之一使用 new { id = "" } ：@Html.HiddenFor(m&nbsp;=>&nbsp;m.Name,&nbsp;new&nbsp;{&nbsp;id&nbsp;=&nbsp;""&nbsp;})

Answer 5

因为您在同一页面中提到了具有相同 id ('Job_Name') 的两个输入元素&nbsp;您不能在同一页面中将相同的 id 赋予两个不同的元素

Answer 6

id是定义元素标识的标识符。它被设计成像一个key元素，因此它需要是独一无二的。

Answer 7

如果你使用的是 react native web 或 expo pwa，请使用 nativeID 代替 id<input&nbsp;nativeID="someId"/>

Answer 8

更改输入中的 ID，因为它们是导致问题的原因。作为一般规则，您不希望在任何元素上使用相同的 ID。id 建议使用类似于 job_name1/job_name2 的内容