0

我正在PhoneGap 的帮助下制作一个Android 应用程序。请帮助我如何动态地带来背景颜色

在 HTML5 中：-

<div data-role="page">
    <div data-role="content" >
        <div class="my_body1">      
            <ul id="table_list_id"></ul>
        </div>
    </div>
</div>

在 CSS3 中：-

.my_body1 ul li {
    float: left;
    list-style-type: none;
    border: 2px solid #a1a1a1;
    padding: 5px 5px;
    text-align: center;
    width: 120px;
    border-radius: 5px;
    margin: 1%;
    box-shadow: 5px 5px 5px #888888;
}

.my_body1 ul {
    width: 100%;
}

.my_body1 ul li a {
    text-decoration: none;
    color: #525252;
}

在 jQuery 中：-

  function callXMLConnection() {
    $("#table_list_id").empty();
    $.support.cors = true;
    $.ajax({
        type: "GET",
        url: "table.html",
        contentType: "text/xml",
        dataType: "xml",
        data: "",
        cache: false,
        processData: false,
        crossDomain: true,
        success: function (data) {
            $(data).find('xyz').each(function () {
                var title = $(this).find('title').text();
                var status = $(this).find('status').text();
                if (status == 'vacant') {
                    var scripts = "<li><a href='#'>" + title + "</a></li>"
                    $("#table_list_id").append(scripts).trigger('create');
                }
                else if (status == 'occupied') {
                    var scripts = "<li><a href='#' >" + title + "</a></li>"
                    $("#table_list_id").append(scripts).trigger('create');
                }
            });
        }

    });
}
$(document).unbind('pageinit').bind('pageinit', function () {
    callXMLConnection();
});

我想要状态为空时的背景颜色，那么它应该是绿色，而当状态被占用时，它应该是红色。

请帮帮我

4

4 回答 4

1

尝试使用csslike，

var scripts='';
if(status == 'vacant'){              
    scripts = "<li style='background-color:green'><a href='#'>"+title+"</a></li>";
}  
else if(status == 'occupied'){  
    scripts = "<li style='background-color:red'><a href='#'>"+title+"</a></li>";
}
if(scripts){
   $("#table_list_id").append(scripts)
                      .trigger('create');
}

或者，您可以创建class类似status，

CSS

.vacant{background-color:green} /* green background for vacant class */
.occupied{background-color:red} /* red background for occupied class */

脚本

    ......
    var status = $(this).find('status').text();
    var scripts = "<li class='"+status+"'><a href='#'>" + title + "</a></li>";
    $("#table_list_id").append(scripts).trigger('create');

它又甜又甜

于 2013-08-20T05:52:28.087 回答
1

这可能是使用 jQuery 设置背景颜色的有用代码行。

$("#table_list_id").css("background-color","YOUR COLOR")
于 2013-11-27T11:25:57.363 回答
1

要通过设置 CSS 属性使用 jQuery 设置背景颜色，可以使用以下代码：

$("#table_list_id").css("background-color","YOUR COLOR")
于 2013-08-20T06:07:01.100 回答
0

终于我得到了答案谢谢你的帮助，但我自己找到了答案

在 jQuery 中：-

$(data).find('xyz').each(function () {
            var title = $(this).find('title').text();
            var status = $(this).find('status').text();
            if (status == 'vacant') {
                var scripts = "<li style='background:#00FF66'><a href='#'>" + title + "</a></li>"
                $("#table_list_id").append(scripts).trigger('create');
            }
            else if (status == 'occupied') {
                var scripts = "<li style='background:#FF0000'><a href='#' >" + title + "</a></li>"
                $("#table_list_id").append(scripts).trigger('create');
            }
});
于 2013-08-20T06:38:02.247 回答