找到 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 type="text" class="form-control" id="Job_Name" name="Job_Name" required="">

您需要为每个输入更改 de id

Answer 3

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

以两种不同的形式复制输入标签

您必须为不同的元素使用不同的 id

Answer 4

只需对两个字段之一使用 new { id = "" } ：

@Html.HiddenFor(m => m.Name, new { id = "" })

Answer 5

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

Answer 6

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

Answer 7

如果你使用的是 react native web 或 expo pwa，请使用 nativeID 代替 id

<input nativeID="someId"/>

Answer 8

更改输入中的 ID，因为它们是导致问题的原因。

作为一般规则，您不希望在任何元素上使用相同的 ID。

id 建议使用类似于 job_name1/job_name2 的内容