Question

我在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();
});

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

请帮帮我

Answer 1

尝试使用css之类的，

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之类的，{/ p>

<强> CSS

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

<强> SCRIPT

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

排序和甜蜜

Answer 2

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

$("#table_list_id").css("background-color","YOUR COLOR")

Answer 3

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

$("#table_list_id").css("background-color","YOUR COLOR")

Answer 4

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

在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');
            }
});

如何动态地带来背景色

4 个答案: