在編寫JS沉重的Web應用程序時，我應該如何避免重複的ID？

具體來說，我有我的（嚴重的JS）網頁的區域包含HTML元素的列表，爲簡單起見，我們假設只有兩個列表：A和B.讓我們也說當我點擊列表A中的第一項A1）列表B（B1）中的第一項發生了一些事情。在編寫JS沉重的Web應用程序時，我應該如何避免重複的ID？

我給列表A中的每個元素一個普通的HTML類和一個ID（如<li class='listAmember' id='1'>...</li>）。我以類似的方式在列表B中設置了元素（如<li class='listBmember' id='1'>）。然後，我附加了一些click處理程序（在這種情況下使用jQuery），然後跑掉與重複的ID問題，即使我有資格我的jQuery的基於身份的選擇與類名，這樣

$('.listAmember#1').click(function(){});

我已經意識到這是不好的做法（ID在文檔中應該是唯一的！），但我不確定有哪些好的替代方案。

我真的不想創建像listAmember-1這樣的ID，因爲如果我在我的JS代碼中有一個查找表（這是鍵入數字ID），我需要從該ID解析出1字符串來獲得'真正'的ID。（而且我仍然需要添加類似listAmember的類用於樣式目的，而且看起來不必要的重複？）總而言之，這看起來很笨拙，我認爲有更好的方法嗎？

來源

2014-01-28 Ben

請勿使用'id'。使用'class'和'data- *'屬性！ – Florent

或者使用MV * JS框架代替低級別的jQuery DOM操作意大利麪條 –

正如Florent所說，我會盡量避免使用ID。一個慣例是使用像js-list-a這樣的類名來表示它是僅用於JavaScript的類。然後你可以自由地開始使用列表中的li的索引。

此外，您可以在列表中設置一個click處理程序並使用。

這些想法的組合意味着您不必觸摸ID。

來源

2014-01-28 15:26:27

您能否詳細說明事件委託在這裏可能有多好？ – Ben

對於統一ID的可能在外部使用Libarys的系統中，您應該始終使用命名空間附加它們。例如：「myFancySlider-container」這有助於保持您的特殊應用程序的唯一名稱。

如果您生成動態代碼，則必須確保僅創建每個對象的其中一個。或者你用迭代來組裝它們。另一種可能是與時間戳統一。

編輯正如其他人已經提到，你應該避免使用ID的，因爲你可以。 ID的唯一意義，從獨特的屬性中受益。例如，你確切地知道你想要什麼元素，所以ID可能是一個非常好的捷徑。動態內容應用程序的特別之處。

來源

2014-01-28 15:27:40 Panade

在編寫JS沉重的Web應用程序時，我應該如何避免重複的ID？

回答

相關問題