Question

在Salesforce的一个jQuery Mobile示例中，应用程序中的this page重新使用id FirstName，LastName和Email。

<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 / page中的类Firstname？也许问题是“这是有效的HTML吗？”可能看起来很明显，我问这个问题的原因是我想也许我错过了一些东西，如果它是在Salesforce的例子中。

编辑2 ：我刚刚找到此链接http://forum.jquery.com/topic/using-ids-in-jquery-mobile-pages，以便就此问题进行详细讨论。

Answer 1

它不是有效的HTML。 validator.w3.org给出错误“Duplicate ID FirstName”，并为其他人提供类似的信息。也就是说，大多数现代浏览器在给出无效HTML时会尝试做一些合理的事情。

Answer 2

首先，在使用jQuery Mobile时，首先要了解有效的 HTML 。您需要记住，在基本级别上，jQuery Mobile的工作方式与普通的Web开发有点不同。如果使用多页模板 DOM 可以/将包含多个页面。强迫独特的身份确实没有意义。

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

关于你的上一个问题。只能访问当前活动页面上的id。使用这个jQuery Mobile选择器可以轻松完成：

$.mobile.activePage

例如，这段代码：

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

会为您提供当前活动页面的ID。基本上它是一个currant活动页面div的选择器。例如，您可以使用 find 功能访问内页内容。

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

Answer 3

不，它无效，最优雅的解决方案是使用class属性。

Answer 4

所有元素的id属性不仅必须在给定页面上是唯一的，而且在站点的页面中也必须是唯一的。这是因为jQuery Mobile的单页导航模型允许同时在DOM中存在许多不同的“页面”。这也适用于使用多页模板，因为模板上的所有“页面”都会立即加载。

参考：http://demos.jquerymobile.com/1.4.4/pages/

在多页模板中重复使用id是否合适？

4 个答案: