尝试在多个 "pages" jQuery 移动设备上使用 header 功能

Question

我正在使用 jQuery 移动 multi-page 模板。

我在页面之间有一个 header 将保持不变，但是 data-id 无法使它们在页面之间保持相同（不确定为什么 - 文档说这应该有效）

我试图让相同的函数影响每个 header 完全相同，但是无法在 HTML DOM.[=15= 中使用多个 ID ]

例如：

<div class="absolute-header" data-id="main-header" data-role="header"><h1>Header Title<a href="#page-messages"><img id="mail" class="menu-mail"></a></h1></div>

我将在多个页面上使用相同的 header - 我应该如何确保每个 jQuery 移动页面执行相同的 Javascript 代码块并影响 header 在那个页面上？我想做类似的事情：

            if (data.data.has_mail == true) {
                var mail = document.getElementById("mail-reddit");
                mail.setAttribute("src", "orange mail.png");
            }

但是，每个 DOM 元素只能有一个 ID - 这包括 jQuery 个移动页面。

Answer 1

如您所说，您不能复制元素 id，您必须使用 class 或（正如您已经完成的那样）自定义数据属性 data-*.

现在，使用 jQuery selector 到 select 您的页面，header 图片并设置它们的来源：

// using a class
$("#pageid .menu-mail").attr("src", "orange mail.png");

// warning: this selector updates all images in the header
$("#pageid [data-id=main-header] img").attr("src", "orange mail.png");

将此代码放入 pageshow 事件处理程序中，以便在每次显示页面时执行它：

$(document).on("pageshow", "#my_page_id", function(event, ui)
{
    // change image source
});

即使在这里，您也可以 select 一次将所有页面更改为 #my_page_id 和 [data-role=page]。

尝试在多个 "pages" jQuery 移动设备上使用 header 功能

Trying to have a header function across multiple "pages" jQuery Mobile

html

javascript

jquery

jquery-mobile