Question

我已经创建了一个jQuery Mobile（1.0 final）应用程序，而且我在使用Flickering时遇到了一些问题。我知道这是目前使用jQM定义的错误，但我想看看我能做些什么来解决这个问题。

here处的帖子提到了以下内容：

在页面中多次使用相同的#id时会发生闪烁，当您使用单页模板方法时，这不是不可能的。所以一定不要多次使用#id。

这对我来说有点模糊......显然因为jQM加载了AJAX，所以任何时候都可能在DOM中有多个页面。在我的情况下，我的页面级ID都是唯一的，但在页面中使用的几个ID不是（例如，data-role=content div的每个页面的ID为#mainPageContent。

这是一种可接受的行为，还是我的ID在全球范围内是唯一的？

PS：对不起，如果这是一个骗局，我发现了一些类似于这个问题的stackoverflow帖子，但我觉得我没有真正回答这个问题。

Answer 1

没有重复的ID不是好的，因为Id属性是唯一标识符。

http://www.w3.org/TR/html5/elements

3.2.3.1 ID属性

id属性指定其元素的唯一标识符（ID）。该   value必须在元素的home子树中的所有ID中唯一   并且必须至少包含一个字符。该值不得包含   任何空格字符。

元素的唯一标识符可用于各种目的，   最值得注意的是使用链接到文档的特定部分的方法   片段标识符，作为在编写脚本时定位元素的方法，   并且作为一种从CSS设置特定元素的方式。

如果值不是空字符串，则用户代理必须关联   具有给定值的元素（确切地说，包括任何空格字符）   为了在元素的主子树中进行ID匹配   （例如，对于CSS中的选择器或者中的getElementById（）方法   DOM）。

标识符是不透明的字符串。特殊含义不应该是   派生自id属性的值。

此规范不排除具有多个ID的元素，如果   其他机制（例如DOM Core方法）可以在a中设置元素的ID   与id属性不冲突的方式。

id IDL属性必须反映id内容属性。

Answer 2

您的ID 在整个jQuery Mobile网站中必须是唯一的，以确保相同的ID不会作为已存在的元素附加到DOM。

这方面的一个很好的解决方法（因为您已经拥有唯一的data-role="page" ID，就是将页面中的其余ID更改为类：

<div data-role="page" id="home">
    <div class="mainPageContent" data-role="content"></div>
</div>

通过这种方式，您可以轻松地使用CSS / JS定位元素，以对网站进行全局更改或定位特定网页：

<强> GLOBAL

<style>
.mainPageContent {
    color : gold;
}
</style>
<script>
$(document).delegate('.mainPageContent', 'click', function () {
    //...
});
</script>

PAGE SPECIFIC

<style>
#home > .mainPageContent {
    color : magenta;
}
</style>
<script>
$(document).delegate('#home > .mainPageContent', 'click', function () {
    //...
});
</script>

jquery mobile：页面中的重复ID好吗？

2 个答案: