javascript - 对重复的 HTML 使用相同的 JavaScript

Question

我应该在同一页面上多次重复相同的 HTML 代码段。我有一个外部 JavaScript 文件，每当用户与重复片段之一交互时就会调用其功能。但是，只有三个代码段中的第一个会受到交互影响。当与其他两个交互时，没有任何反应，这意味着 JavaScript 不会被调用。

我假设，如果所有 HTML 代码段都具有相同的 ID 和类(除了应该分配唯一 ID 的事实之外)，那么如果在任何位置进行更改，至少所有 3 个 HTML 段中的内容都会更改这些段的其他实例。

以下是此问题的示例:

<input id="my-id" type="text" />
<input id="my-id" type="text" />
<input id="my-id" type="text" />

<script>
    var textbox = document.getElementById("my-id");
    textbox.onkeyup = function() {
	    alert("ok");
    }
</script>

在这里，只有与 my-id 的第一个实例的交互才会创建警报框，其他 2 个实例则不会。我怎样才能使我的代码适用于所有 3 个文本框？

Answer 1

您不应该对多个元素使用相同的 id。如果多个元素具有相同的 id，选择器将仅返回第一个匹配的元素。如果使用 class 而不是 id 会更好。像这样的东西会起作用:

<input class="my-id" type="text" />
<input class="my-id" type="text" />
<input class="my-id" type="text" />

<script>
var textboxes = document.getElementsByClassName("my-id");
for (var i = 0; i < textboxes.length; i++) {
   textboxes[i].onkeyup = function(){
    alert("ok");
   };
}
</script>