javascript - 如何以可访问性友好的方式在我的 jQuery Mobile 站点中隐藏我的所有标签？

Question

我试图以一种可访问性友好的方式隐藏我的 jQuery Mobile 网站上的所有标签。为此，我使用 javascript 将类 ui-hidden-accessible 应用到我网站上每个文档的每个标签标签 (http://jquerymobile.com/test/docs/forms/docs-forms.html)。

但是，我的 javascript 不工作。

这是一个 Fiddle，展示了 label 标签是如何出现的。 http://jsfiddle.net/tW4Xu/

为什么它不起作用？我还仔细检查了其他 jQM 事件处理程序，例如 pageinit 和 pagecreate: http://jquerymobile.com/test/docs/api/events.html

我的隐藏标签标签的javascript:

// done after page is loaded
$(document).on("pageshow", "label", function(event) {
   $(this).addClass("ui-hidden-accessible");     
});​

Answer 1

虽然我不确定其中有多少来自 jsfiddle 摘要以及您的完整代码中有多少，但您似乎在这里出了一些问题。

首先要注意的是'pageshow'是一个页面转换事件。看起来您可能想改用“pageinit”。以下是 jQM 文档对其的描述:

Triggered on the page being initialized, after initialization occurs. We recommend binding to this event instead of DOM ready() because this will work regardless of whether the page is loaded directly or if the content is pulled into another page as part of the Ajax navigation system.

$( '#aboutPage' ).live( 'pageinit',function(event){  
    alert( 'This page was just enhanced by jQuery Mobile!' );  
});

还请注意，1) 事件与 live() 而不是 on() 绑定(bind)(不知道是否存在差异)，以及 2) 事件被附加到 jQM“页面”的特定 ID。这是您的 jsfiddle 示例中缺少的部分内容。没有任何命名的 jQM 页面。 jQM 打乱了页面准备就绪的整个想法，因为所有内容都在一个 html 文件中，然后使用 ID 分块并通过 AJAX 插入。

最后:即使 jQM 说不要，如果您的目标是将此类添加到每个 jQM 页面上的每个标签，我会使用旧的 $(document).ready() 然后使用 $ .each() 一次更改它们。同样，来自 jQM 文档:

However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the pageinit event.

所以 $.ready() 并没有什么坏处，只是这个事件只被触发一次，所以后续的页面转换不会触发它。但这可能正是您首先想要的。

此代码适用于 jsfiddle:

$(document).ready( function(event) {  
  $("label").each( function(index, element) {   
    element.addClass("ui-hidden-accessible");  
  });  
});​

如果在您的实际站点中您注意到页面转换会导致标签返回，那么您将需要绑定(bind)到其他东西，同样可能是“pageinit”。

希望对您有所帮助!为冗长道歉...我有点要去那里，是吧？