Question

我正在使用jQuery Mobile多页面模板。

我的页面之间有一个标题会保持不变，但是data-id不能使它们在页面上相同（不确定原因 - 文档说这应该有效）

我试图让相同的函数影响每个标题完全相同的标题，但HTML DOM中无法使用多个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>

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

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

但是，每个DOM元素只能有一个id - 包括jQuery Mobile页面。

Answer 1

正如您所说，您无法复制元素id，您必须使用class或（因为您已经完成）自定义数据属性data-*。

现在，使用jQuery selector选择您的页面，标题图片并设置其来源：

// 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
});

即使在这里，您也可以使用#my_page_id一次性更改[data-role=page]来选择所有网页。

试图在多个＆＃34;页面上设置标题功能＆＃34; jQuery Mobile

1 个答案: