使用相同的JavaScript重复HTML

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() { 
 
\t  alert("ok"); 
 
    } 
 
</script>

在这里，只有我-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>

Answer 2

你不能有相同的ID到所有div的ID应该是唯一的。请将ID更改为课程才能工作。

Answer 3

上时，有该ID的多个实例（这是一个很大的禁忌）将仅在第一个实例运行特定的ID调用Javascript函数在DOM中。尝试在inputs上调用您的功能，或者为每个input分配一个班级，并在班级中调用它。

Answer 4

您不能多次使用ID名称。请将ID更改为CLASS ..它会起作用....

Answer 5

ID必须是唯一的！

为了对多个div使用相同的javacsript函数，为所有div指定一个公共类并调用该类的js函数！

Answer 6

ID必须是唯一的，请参阅：Can multiple different HTML elements have the same ID if they're different elements?。除此之外，getElementById只返回一个元素。看看Adding event listeners to multiple elements

var textboxes = document.getElementsByClassName("my-class"); 
 

 
function keyUpListener() { 
 
    console.log("ok"); 
 
} 
 

 
for (var i = 0; i < textboxes.length; i++) { 
 
    textboxes[i].addEventListener('keyup', keyUpListener, false); 
 
}

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

或者使用事件委派：

function keyUpListener(event) { 
 
    if(event.target.getAttribute('class').split(' ').indexOf('my-class') !== -1) { 
 
    console.log('ok'); 
 
    } 
 
} 
 

 
document.addEventListener('keyup', keyUpListener, false);

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

Answer 7

因为元素的ID必须是唯一的，这个属性不能被用来绑定点击事件。
HTML5支持CSS选择器，一种识别具有相似特征的元素的强大机制。
你的代码可以重写与CSS选择器象下面这样：

<input type="text" data-item="Text box 1"/> 
<input type="text" data-item="Text box 2"/> 
<input type="text" data-item="Text box 3"/> 

<script> 
    function keyUpListener() { 
     var itemId = this.getAttribute('data-item'); 
     alert(itemId); 
    } 

    var textboxes = document.querySelectorAll('input'); 
    for (var i = 0; i < textboxes.length; i++) { 
     textboxes[i].addEventListener('keydown', keyUpListener, false); 
    } 
</script>