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

Question

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

[DOM] Found 2 elements with non-unique 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 的目的。