Question

我正在使用Jquery mobile进行移动应用。在我更改页面之前，我想在该页面上进行一些CSS更改。当我设置例如将类添加到下一页的id或颜色更改时：$("#divA1").css("background-color","blue");

它会更改当前页面上的id（如果存在），然后才会更改下一页。如何在一个页面上设置CSS设置，但使用CSS设置加载下一页。

Answer 1

在大多数情况下，jQuery Mobile通过ajax调用将其他页面加载到DOM中。这是它工作原理的一个相当基本的部分，你应该确保所有页面上的所有标记ID都是唯一的。

<div id="page1" data-role="page">
    <div data-role="content">
        <div id="myContent1"></div>
    </div>
</div>

<div id="page2" data-role="page">
    <div data-role="content">
        <div id="myContent2"></div>
    </div>
</div>

如果您的网页包含类似的子组件，请考虑使用类：

<div id="page1" data-role="page">
    <div data-role="content">
        <div class="myContent"></div>
    </div>
</div>

<div id="page2" data-role="page">
    <div data-role="content">
        <div class="myContent"></div>
    </div>
</div>

类允许选择$("#page1.myContent").css("background-color");

Answer 2

我不确切地知道你要做什么，但我建议你使用异步ajax调用来下载下一页的DOM。

然后，您可以将所需的更改应用于该DOM，最后将其插入当前的DOM。

这个犯规的存根看起来像这样：

$.ajax('path/to/next/page', {
  async : true,
  complete : function ajaxCallback(newSite) {
    $item = $('YOURSELECTOR');
    // Here you can make changes, such as CSS edition
    $item.css({'background-color' : '#FF0000'});
    // Since you want to make changes to the new site only if you did them in the first site...
    if ($item.length > 0) {
      $(newSite).find('YOURSELECTOR').css({'background-color' : '#FF0000'});
    }

    // Here you can append the new site to the DOM

  }
});

Answer 3

如果必须在新页面上，您有三个选项。

您可以在URL中传递变量以在新页面上进行测试并相应地更改CSS。例如。 www.url.com?newcolor=f00
您可以在当前页面上放置隐藏的表单，更新其中的值并在转到下一页时将其传递。（丑陋的方式，但它的工作原理。）
设置Cookie。（我的首选解决方案，只要启用了cookie就行得很好。老实说，这可能不是。）

然而，最好的选择，特别是在移动设备上，是保留页面的当前框架并通过ajax获取新内容并将其加载到当前页面上的内容div中。

在更改页面之前更改页面的CSS设置

3 个答案: