1

在 Salesforce 的一个 jQuery Mobile 示例中，应用程序中的这个页面重新使用了 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对这个问题进行了很好的讨论。

4

4 回答 4

2

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

于 2013-07-25T20:58:41.147 回答
2

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

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。基本上它是一个黑醋栗活动页面 div 的选择器。例如，您可以使用函数find访问内页内容。

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

于 2013-07-25T22:07:48.840 回答
0

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

于 2013-07-25T20:59:14.280 回答
0

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

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

于 2014-10-09T10:47:17.273 回答