document.getElementById對於不同的「ID」值或替代此代碼

其實我試圖創建一個「自動保存」系統的內容的一些「」標記爲contenteditable。document.getElementById對於不同的「ID」值或替代此代碼

DIVS有像他這樣的結構。

<div id=test_one contenteditable=true> 
<div id=test_other contenteditable=True> 
[..]

和（當用戶停止寫在一個div保存數據）

var timeoutId; 
document.getElementById('test_one').addEventListener("input", function() { 
    clearTimeout(timeoutId); 
    timeoutId = setTimeout(function() {  
      function_to_save();  
    }, 1000); 
}, false);

的問題有這樣的功能，即只有一個DIV正常工作是我嘗試使用這個相同的功能，所有的ID名稱，包括單詞「測試」，因爲所有這些名稱是動態生成的所有div ...

我嘗試使用正則表達式，我無法使這項工作...任何想法或替代代碼？

來源

2015-10-08 oscarabilleira

使用'document.querySelelctorAll'和[屬性選擇]（https://developer.mozilla.org/en-US/docs/Web/ CSS/Attribute_selectors）來查找所有需要附加事件的元素。然後遍歷結果對象，並附加事件。 – Teemu

這是不是一個更好的方法使用專門爲這類Div的類？也使用正則表達式和ID是不高效的。 – error404

你可以使用querySelectorAll得到一個節點列表

var elems = document.querySelectorAll("[id*='test']");

，並作爲問題被標記的jQuery

var elems = $('[id*='test']');

[id^='test']會匹配所有的ID開始test。
[id$='test']將匹配以test結尾的所有ID。
[id*='test']將匹配所有包含test的ID。

有了一個節點列表，你不得不重複

var elems = document.querySelectorAll("[id*='test']"); 

for (var i=elems.length; i--;) { 
    elems[i].addEventListener("input", functionName, false); 
}

來源

2015-10-08 16:59:33 adeneo

謝謝這是非常有用的:)你節省了我的一天;） – oscarabilleira

document.getElementById對於不同的「ID」值或替代此代碼

回答

相關問題