jquery - 在多页面模板中重复使用 id 是否正确？

Question

在 Salesforce 的 jQuery Mobile 示例之一中，this page在应用程序中重新使用 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>

我知道多次使用相同的 id 是无效的 HTML。这是一个 HTML 文档，但在多页模板中，每个 <div data-role="page">从技术上讲是一个单独的页面。

所以我的问题是:这是一个正确的方法吗？如果没有，避免重复使用 id 而无需冗余代码的最优雅方法是什么？在这种情况下，我认为使用相同的 id 可以很方便地根据您所在的页面来选择表元素，而无需为每个页面指定单独的事件处理程序(但也许这只是复制和粘贴错误)。

编辑:我意识到使用类是明确的解决方案，所以我猜问题的一部分是:如何选择，例如，仅当前 div/页面中的类 Firstname ？也许问题是“这是有效的 HTML 吗？”可能看起来很明显，我问这个问题的原因是我认为如果是在 Salesforce 的示例中，我可能会遗漏一些东西。

编辑2:我刚刚找到此链接http://forum.jquery.com/topic/using-ids-in-jquery-mobile-pages就这个问题进行良好的讨论。

Answer 1

首先，伪造您在使用 jQuery Mobile 时学到的有关有效 HTML 的知识。您需要记住，在基本层面上，jQuery Mobile 的工作方式与普通 Web 开发略有不同。如果使用多页模板 DOM 可以/将容纳多于一页。强制使用唯一的 id 确实没有意义。

jQuery Mobile 在使用 id 时只有一条真正的规则，那就是页面必须具有唯一的 id(而且它们不能以数字开头或只是一个number)，其他所有内容都可以有重复的 id，在某些情况下这是先决条件。例如，当您想要覆盖经典 jQuery Mobile 按钮样式(或任何其他小部件)时，您可能希望在每个自定义按钮上使用相同的 id。如果您使用 id 作为自定义按钮，则无需使用 !important 来覆盖经典 CSS 样式。

关于你的最后一个问题。可以仅访问当前事件页面上找到的 id。使用这个 jQuery Mobile 选择器可以轻松完成此操作:

$.mobile.activePage

例如，这段代码:

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

将为您提供当前事件页面的 ID。基本上它是当前事件页面 div 的选择器。例如，您可以使用函数 find 来访问内页内容。

但有一个问题，它只能在 pagebeforeshow、pageshow、pagebeforehide 和 pagehide 页面事件期间使用。不幸的是我不知道你对 jQuery Mobile 了解多少，如果你不知道什么是页面事件，那么看看这个 ARTICLE 。