jQuery Mobile - 基于 WebService 调用更改背景颜色答案

【问题标题】：jQuery Mobile - Change Background Color Based on WebService CalljQuery Mobile - 基于 WebService 调用更改背景颜色
【发布时间】：2015-10-06 11:33:51
【问题描述】：

我有一个运行 jQuery Mobile 的 Phonegap 应用程序。我希望能够根据对我的网络服务的调用对页面进行轻微修改。

我有三列，每列都有自己的颜色：

    <div data-role="page" id="columns">
      <div data-role="header"><h1>Columns</h1></div>
      <div class="col" style="background-color: purple"></div>
      <div class="col" style="background-color: red"></div>
      <div class="col" style="background-color: black"></div>
    </div><!-- page -->

来自我的 API（即 myapi.example.com/?bg-color）的响应将是十六进制代码 (#0066FF)。

如何更新每个单独列的背景颜色以反映 Web 服务值？

【问题讨论】：

使用课程会让你的生活变得更轻松，不过，请看这里：api.jquery.com/css ($(element).css('background-color', myApiResponse))
但是 dom 是在 jquery-mobile 中一起获取的。加载“列”时如何更新背景颜色值？
你可能想展示一个你从服务器得到的响应的例子

标签： jquery css cordova jquery-mobile

【解决方案1】：

您可以使用网络服务更改背景颜色，但这是一个缓慢的过程。您的网络服务颜色响应存储到一个全局变量或本地主机中，请看下面的示例。

<script>
     document.body.style.backgroundColor = // Your global variable  //"#AA0000";
</script>

您的 web 服务在 onpage 加载函数内部调用，因此当页面加载时函数加载并从 web 服务获取背景颜色并设置在正文背景中。

【讨论】：

这是 jQuery 移动版。您需要考虑页面容器负载。

【解决方案2】：

AJAX 调用完成后，获取列并将 background-color CSS 样式设置为返回的颜色：

$(document).on("pagecreate","#columns", function(){ 
    $("#btn").on("click", function(){   
        $.ajax({
            url: "http://echo.jsontest.com/color1/orange/color2/blue/color3/green",
        }).done(function(response) {
            var columns = $("div.col");
            columns.eq(0).css('background-color', response.color1);
            columns.eq(1).css('background-color', response.color2);
            columns.eq(2).css('background-color', response.color3);
        });        
    });
});

DEMO

【讨论】：