[jQuery]透過自訂屬性解決相同id(重複id)的問題

今天同事問小喵一個問題,他說小喵之前改給他用的【民國年挑選日期(請參考這一篇[jQuery]挑選日期的好物 jQuery Plugin [dynDateTime]中文化特別處理)】,這讓小喵很好奇,為何不能用,一看之下,原來之前asp的寫法會用迴圈產生input,並且有相同的Id。本來的語法如下就失效囉

緣起

今天同事問小喵一個問題,他說小喵之前改給他用的【民國年挑選日期(請參考這一篇[jQuery]挑選日期的好物 jQuery Plugin [dynDateTime]中文化特別處理)】,這讓小喵很好奇,為何不能用,一看之下,原來之前asp的寫法會用迴圈產生<input>,並且有相同的Id。

<input type="text" id="txt1" name="txt1" />
<input type="text" id="txt1" name="txt1" />
<input type="text" id="txt1" name="txt1" />
<input type="text" id="txt1" name="txt1" />

本來的語法如下就失效囉

var tx1=$('#txt1');

尋找解答

由於這是以前的舊系統,裡面有很複雜的程式已經在運作,因此建議改為不重複的Id一定被打槍回來。因此開始去搜尋一下是否有解決方案,發現人家改用class抓,也算是個方法,於是小喵要開始幫他的程式碼改造時,又發現,原來他的程式碼也有class,而且還是相同的id不同class

<input type="text" id="txt1" class="D0" name="txt1" />
<input type="text" id="txt1" class="D1" name="txt1" />
<input type="text" id="txt1" class="D0" name="txt1" />
<input type="text" id="txt1" class="D1" name="txt1" />

突發奇想

這時小喵突然想到,其實可以透過屬性來抓物件,而是否可以在html裡面插入自訂的屬性呢??,於是小喵幫他將程式碼改為

<input type="text" id="txt1" class="D0" name="txt1" itype="ChkDate" />
<input type="text" id="txt1" class="D1" name="txt1" itype="ChkDate" />
<input type="text" id="txt1" class="D0" name="txt1" itype="ChkDate" />
<input type="text" id="txt1" class="D1" name="txt1" itype="ChkDate" />

加入個itype屬性,內容都是ChkDate,這個對於input當然是沒有意義的,不過小喵就可以利用他來做小喵要做的事情囉

var tx1=$('input[itype="ChkDate"]');

就醬子,搞定收工!!

實際測試範例


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6) 
topcat
Blog:http://www.dotblogs.com.tw/topcat