在多頁面模板中重用ID是否合適？

在Salesforce的jQuery Mobile示例中，應用程序中的this page將重新使用ID FirstName，LastName和Email。在多頁面模板中重用ID是否合適？

<div data-role="page" data-theme="b" id="detailpage"> 
    <div data-role="header"> 
    <a href='#mainpage' id="back" class='ui-btn-left' data-icon='arrow-l'>Back</a> 
     <h1>Contact Detail</h1> 
    </div> 
    <div data-role="content"> 
     <table> 
      <tr><td>First Name:</td><td id="FirstName"></td></tr> 
      <tr><td>Last Name:</td><td id="LastName"></td></tr> 
      <tr><td>Email:</td><td id="Email"></td></tr> 
     </table> 
     <form name="detail" id="detail"> 
      <input type="hidden" name="Id" id="Id" /> 
      <button data-role="button" id="editbtn">Edit</button> 
      <button data-role="button" id="deletebtn" data-icon="delete" 
       data-theme="e">Delete</button> 
     </form> 
    </div> 
    <div data-role="footer"> 
     <h4>Force.com</h4> 
    </div> 
</div> 
<div data-role="page" data-theme="b" id="editpage"> 
    <div data-role="header"> 
    <a href='#mainpage' id="back" class='ui-btn-left' data-icon='arrow-l'>Back</a> 
     <h1 id="formheader">New Contact</h1> 
    </div> 
    <div data-role="content"> 
     <form name="contact" id="form"> 
      <input type="hidden" name="Id" id="Id" /> 
      <table> 
       <tr><td>First Name:</td><td ><input name="FirstName" id="FirstName" 
        data-theme="c"/></td></tr> 
       <tr><td>Last Name:</td><td ><input name="LastName" id="LastName" 
         data-theme="c"/></td></tr> 
       <tr> 
        <td>Email:</td> 
        <td><input name="Email" id="Email" 
         data-theme="c"/></td> 
       </tr> 
      </table> 
      <button data-role="button" id="actionbtn">Action</button> 
     </form> 
    </div>

我知道這是無效的HTML多次使用相同的ID。這是一個HTML文檔，但在多頁面模板中，每個<div data-role="page">在技術上都是一個單獨的頁面。

所以我的問題是：這是一個適當的方法？如果不是，沒有冗餘代碼，避免重用id的最優雅的方法是什麼？在這種情況下，我認爲使用相同的id可以方便地根據你所在的頁面選擇表格元素，而無需爲每個頁面指定單獨的事件處理程序（但也許它只是複製和粘貼錯誤）。我知道使用類是明確的解決方案，所以我猜想問題的一部分是：如何選擇，例如，只在當前div /頁的類名Firstname？也許這個問題 - 「這個有效的HTML？」可能看起來很明顯，我問這個問題的原因是我認爲如果是在Salesforce的例子中，我可能錯過了一些東西。

編輯2：我剛剛發現這個鏈接http://forum.jquery.com/topic/using-ids-in-jquery-mobile-pages關於這個問題的一個很好的討論。

來源

2013-07-25 user1234

它是無效的，但是，你可以隨時使用，將最終被傳遞到queryselectorall選擇，如'#thepageid＃theinputid'與他們合作。很明顯，效率不高，這是一個移動環境，效率非常重要，所以我建議找到另一種方式。 –

首先僞造你曾經學過的關於有效的HTML當與jQuery Mobile合作時。您需要記住的是，在基本級別上，jQuery Mobile與普通Web開發有點不同。如果使用多頁面模板DOM can/will hold more more and one page。強制唯一標識符真的沒有意義。

jQuery Mobile的使用ID的工作，那就是網頁MUST具有唯一的ID（再加上他們不能用數字開頭或只是一個數字），其他都可以有重複的ID中，如果只有一個真正的規則有些情況下這是一個先決條件。例如，當您想要覆蓋傳統的jQuery Mobile按鈕樣式（或任何其他窗口小部件）時，您希望在每個自定義按鈕上使用相同的ID。如果您使用id作爲自定義按鈕，您將不需要使用!important覆蓋經典CSS樣式。

關於你最後一個問題。可以只訪問當前活動頁面上的標識。它可以很容易地與這個jQuery Mobile的選擇來實現：

$.mobile.activePage

例如，下面的代碼：

$(document).on('pagebeforeshow', function() { 
    alert($.mobile.activePage.attr('id')); 
});

會給你當前活動的頁面的ID。基本上它是一個currant活動頁面div的選擇器。例如，您可以使用功能find訪問內頁內容。

但有一個問題，它只能在pagebeforeshow，pageshow，pagebeforehide和pagehide頁面事件中使用。不幸的是，我不知道你對jQuery Mobile瞭解多少，萬一你不知道頁面事件是什麼，那麼看看這個ARTICLE。

來源

2013-07-25 22:07:48 Gajotres

謝謝，這是我正在尋找的jQuery Mobile特定答案。 – user1234

這不是有效的HTML。給出了錯誤「重複ID名」，並給出了其他的類似。也就是說，大多數現代瀏覽器會在給出無效的HTML時嘗試做一些合理的事情。

來源

2013-07-25 20:58:41

不知道有關validator.w3.org。謝謝！ – user1234

不，它是無效的，最優雅的解決方案是使用類屬性來代替。

來源

2013-07-25 20:59:14

所有元素的id屬性必須不僅在給定頁面上是唯一的，而且在網站中也是唯一的。這是因爲jQuery Mobile的單頁導航模型允許同時在DOM中出現許多不同的「頁面」。這也適用於使用多頁面模板時，因爲模板上的所有「頁面」都會一次加載。

編號：http://demos.jquerymobile.com/1.4.4/pages/

來源

2014-10-09 10:47:17

在多頁面模板中重用ID是否合適？

回答

相關問題