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

Question

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

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

Answer 1

我不完全了解您要做什么，但我建议您使用异步 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 2

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

1. 您可以在 URL 中传递一个变量以在新页面上进行测试并适当地更改 CSS。例如。www.url.com?newcolor=f00

2. 您可以在当前页面上放置一个隐藏表单，更新其中的值并在转到下一页时传递它。（丑陋的做法，但它的工作原理。）

3. 设置一个cookie。（我首选的解决方案，只要启用 cookie 就可以很好地工作。老实说，它们可能不是。）

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

Answer 3

在大多数情况下，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");