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

Posted 2023-05-07

【中文标题】找到 2 个具有非唯一 ID 的元素

【英文标题】：Found 2 elements with non-unique id

【发布时间】：2021-01-24 04:40:26

【问题描述】：

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

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

这是我的 html sn-p:

               <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>

如何解决“”警告？

【问题讨论】：

使 ID 唯一？

【参考方案1】：

您需要将id="Job_Name" 更改为唯一，例如id="Job_Name1" id="Job_Name2" 等，因为 ID 在 DOM 中必须是唯一的。

当您想使用document.getElementById('Job_Name') 或使用jQuery $('#Job_Name') 选择元素时会产生冲突，因为您将无法获得具有相同ID 的第二个或其他元素。您将需要使用 index 和 querySelectorAll ，这将首先破坏使用 Id 的目的。

【参考方案2】：

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

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

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

【参考方案3】：

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

【讨论】：

没有必要像这样使用大写字母。

【参考方案4】：

id 是定义元素身份的标识符。它的作用类似于元素的key，因此它必须是唯一的。

检查这个答案.. https://***.com/a/2187788/8230086

【参考方案5】：

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

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

id 建议使用类似 job_name1/job_name2 的东西

【参考方案6】：

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

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

【参考方案7】：

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

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