使用相同的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>