更改CSS设置更改为

Question

页面之前我使用jQuery移动我的移动应用程序。在更改页面之前，我想在该页面上进行一些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> 

如果您的网页包含相似的子componants，考虑一个类，而不是：

<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

如果它必须是一个新的页面上，你有三种选择。

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

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

3. 设置cookie。 （我首选的方案，伟大工程只要启用Cookie。其中，说实话，他们可能不会。）

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