在HTML中適當地分配ID

我是jQuery新手（1.5個月），我發現自己開發了一個我並不特別喜歡的PHP + jQuery習慣。我想知道是否有人有建議讓事情更優雅。考慮到我已經通過執行一個簡單的SQL查詢生成與PHP呼應以下HTML：在HTML中適當地分配ID

<div id='boat_1' class='boat speedboat'></div>  
<div id='boat_2' class='boat dory'></div> 
<div id='car_1' class='car racecar'></div> 
<div id='car_2' class='car racecar'></div>

正如你所看到的，我選擇了跟隨{type}_{id}的id命名約定。現在，在jQuery中，假設我想將一個點擊處理程序綁定到這些div上。記住，他們是動態的，有可能是其中任意數量的，我會執行：

$(".car").bind('click', function(){ 
//do something 
});

但通常情況下，這//do something想知道哪輛車發射click事件。此外，該//do something可能需要單獨的類型（船或汽車）和id執行POST操作並寫回數據庫...（例如）

我現在正在做什麼來找到ID（當我需要其他獨特的信息）很簡單，但對我來說，它的氣味：

$(".car").bind(function(){ 
var id = $(this).attr("id").replace("car_", ""); 
});

有人可能會建議使用類屬性，而不是因爲你不必擔心唯一性。但是因爲類名不是單數的（每個元素可以有多個，如我所示），我不認爲這是一個候選解決方案。

因爲id在整個文檔中必須是唯一的，所以這是我解決的解決方案。我知道getElementById（）會中斷，如果多個相同名稱的ID可能成爲可能，但有時我不知道是否有益，如果ids不必是唯一的，只要他們有不同的父母。

你怎麼做到的？

我應該使用HTML5的data-*嗎？

謝謝！

來源

2011-07-08 Jordan Arseno

是。

渲染HTML這樣的：

<div data-id="1" class="boat speedboat"></div>  
<div data-id="2" class="boat dory"></div> 
<div data-id="1" class="car racecar"></div> 
<div data-id="2" class="car racecar"></div>

jQuery的處理

$(".car").bind(function(){ 
    var $this=$(this); 
    var id = $this.data("id"); 
});

Jquery Data function

在jQuery 1.4.3 HTML 5數據 - 屬性將被自動拉到jQuery的的數據對象。在jQuery 1.6中修改了嵌入破折號屬性的處理方式，以符合W3C HTML5規範。

來源

2011-07-08 09:50:07

部落發言。謝謝！這只是我需要的確認。祝一切順利。 –

你喜歡你的方法嗎？我不想使用bind()，而是使用click()。另外如果你願意，你可以鏈接類，並改變你的//do something，而不是_拆分ID和返回數組中的最後[1]項目？ :)

你的方法似乎很好，以獲得數字ID！ :)

來源

2011-07-08 09:48:00

我不喜歡我的方法是我必須執行.replace（）來獲取有關觸發該事件的元素的明顯而重要的信息。叫我一個僧侶，但這個問題是重複發生的，我只是好奇，如果一個更好的，更多的語義解決方案存在。 –

說實話，這就是我要做的。

我會圍繞然而過濾它的其他方式，並使其成爲一個功能類似this guy correctly suggested並拉動數出來的字符串：

function pullNumber(n) { 
    return n.replace(/[^0-9]/g, ''); }

來源

2011-07-08 09:49:38 josemota

謝謝josemota，你是對的 - 定義相反的結果更有意義，因爲函數可以用於任何元素。現在...爲了保持我的id和類沒有javascript標識符，我想我會選擇Mark建議的data-*方法。通過使用這種方法，我可以保持id和類爲空;我的設計師和我不會踩到彼此的腳趾。 –

太好了。很高興我能幫忙，有一個好的！ – josemota

我覺得你的方法看起來不錯，你在做什麼，但我會指出，在HTML 4，你可以使用rel屬性，它實際上是未使用的，但有效的HTML（所以它贏得了」 t會在HTML4分析器中觸發諸如data-*的警告）。我使用它，就像你提出的使用class屬性一樣，但沒有消除我的類的副作用。

來源

2011-07-08 09:52:53 Flimzy

是的，我不喜歡使用類的另一個原因是因爲設計師很難。我想保留所有的id和類沒有任何標識符，只能用作javascript標識符。謝謝你的提示。 –

在HTML中適當地分配ID

回答

相關問題