在HTML中處理大量的ID

我是新來的網頁設計，有一個問題，我真的不知道如何以最雄辯的方式解決。我有7個工作日元素，每個下拉2。下拉菜單中有24個選項，每天1個小時。這意味着用戶可以總共點擊336個可能的選項。在HTML中處理大量的ID

我需要爲這336個元素中的每一個分配一個函數，這些元素將更新下拉菜單的相應框中的文本。

我知道如何去做我想達到的目標，但我不知道如何「正確地」做到這一點。我可以編寫我的函數，根據您點擊的內容更新文本。然後，我可以通過手動爲每個336個元素分配一個唯一的ID，然後編寫一個循環並將我的第一個函數分配給它們的函數。雖然這將意味着在我的HTML中手動分配336個唯一ID。有什麼感覺這個錯嗎？有沒有更好的辦法？

我覺得我錯過了一件非常明顯的事情，這會讓事情變得更容易 - 也許我正在採取一種完全錯誤的方法？

availability

來源

2017-04-05 Phil O' kelly

爲了更好地理解你要達到的目標，你應該提供一些示例代碼來說明你的解釋。 –

你能製作一個[CodePen]（http://codepen.io/）或[JSFiddle]（https://jsfiddle.net/）嗎？如果這是生產代碼，則可以對其進行混淆。 –

事件委託：https：//learn.jquery.com/events/event-delegation/ – CSturgess

你不應該使用ID和只使用一個單一的事件的所有元素。

有一個概念叫做事件委託，它將一個事件附加到一個父節點，並且它將處理所有子節點的事件。由於事件在javascript中「冒泡」，任何事件最終都會觸發父節點並觸發它。當發生這種情況時，您可以檢查事件的原始目標，並檢查它是否是您關心的類別之一。

下面是一個例子：https://davidwalsh.name/event-delegate

許多圖書館提供這個自己的支持，但它實際上是很容易做到的。

來源

2017-04-05 17:47:06 CSturgess

嘗試使用比手動分配的ID 「this」關鍵字。

所以不是document.getElementById(id)可以使用this

例如，而不是

HTML

<element id="myid" onClick="changer(myid);"> </element>

function changer(id) 
{ 
document.getElementById(id).innerHTML="changed"; 
}

您可以嘗試

HTML

<element onClick="changer(this);"> </element>

function changer(obj) 
{ 
obj.innerHTML="changed"; 
}

來源

2017-04-05 17:33:11

-1

有你可以用它來遍歷DOM等功能。查看Element文檔。

有無數的方法來實現你想要的這裏，但我會通過分配像day你整天選項的共享類做到這一點，和其他類像start-time和end-time的時間選項。然後我將函數綁定到由document.getElementsByClassName('day')返回的所有元素

來源

2017-04-05 17:38:36 ChemicalRocketeer

將單個onclick事件處理程序分配給所有元素的336個。連接到傳遞給事件處理程序的Event參數是一個屬性target，它是觸發事件的元素。

然後找到此元素的父級（簡單node.parentElement），並對其進行處理。

P.S.您不需要在元素上擁有唯一的ID以便爲其分配事件處理程序。

嘗試：

3210

來源

2017-04-05 17:41:36 Rishav

這將創建336個單獨事件，這將嚴重影響較慢瀏覽器的性能。改爲查看事件委派（https://learn.jquery.com/events/event-delegation/）。 – CSturgess

@ CSturgess很好。但是我認爲實現它冒泡可能會稍微複雜一些，具體取決於你附加事件處理程序的高度。 OP可能會發現將336個事件處理程序附加到他的每個元素更簡單。在那張照片上，我懷疑演出會受到事件處理程序的影響。你有一些相同的參考？ – Rishav

不是。事件對象包含原始元素本身的細節，可以用來完成單個事件可以做的所有事情。只是因爲有些事情比較容易，並不意味着這是個好主意。性能肯定會受到數百個不必要的事件處理程序的影響。在做了與此類似的事情之後，我瞭解了有關事件代表團的事情，這些事情破壞了手機的性能也許你現在不會注意到真正的區別，但現在學習正確的方式仍然值得。 – CSturgess

在HTML中處理大量的ID

回答

相關問題