Question

我在下面显示的代码是一个json对象，它使用getURI函数从我的sql数据库中获取。只有当用户点击其中一个列表视图列表时，所有这些信息才会显示在details.html中。如果用户没有点击列表中的任何内容，列表视图将保留在页面status.html。

所以这是我的json代码：

$(document).ready(function() {
    var url = "FYPphp/json.php";
    $.getJSON(url, function(result) {
        console.log(result);
        $.each(result, function(i, field) {
            var id = field.id;
            var name = field.name;
            var ic = field.ic;
            var phone = field.phone;
            var home = field.home;
            var vehicle = field.vehicle;
            var plat = field.plat;
            var color = field.color;
            var wash = field.wash;
            var stat = field.stat;
            $("#listview").append("<a class='item' href='details.html?id=" + id + "&name=" + name + "&ic=" + ic + "&phone=" + phone + "&home=" + home + "&vehicle=" + vehicle + "&plat=" + plat + "&color=" + color + "&wash=" + wash + "'><span class='item-note'><p>" + stat + "</p></span><h2>" + name + " </h2></a>");
        });
    });
});

如果查看append方法，则会有一个名为“stat”的变量（在class item-note中）。对于此变量，它可能在sql表中有三个值，即“完成”，“挂起”或“取消”，用户可以从details.html插入。 details.html中变量“stat”的选择代码：

<div class="item">
    <strong>Mark this entry as: </strong>
        <select id="stat">
            <option id="done">Done</option>
            <option id="pending">Pending</option>
            <option id="cancel">Cancel</option>
        </select>
</div>

更新“stat”变量的按钮是这样的：

$("#update").click(function() {
    var id = $("#id").val();
    var stat = $("#stat").val();
    var dataString = "id=" + id + "&stat=" + stat + "&update=";

    $.ajax({
        type: "POST",
        url: "FYPphp/update.php",
        data: dataString,
        crossDomain: true,
        cache: false,
        beforeSend: function() {
            $("#update").val('Updating...');
        },
        success: function(data) {
            if (data == "success") {
                alert("Updated!");
                $("#update").val("Update");
            } else if (data == "error") {
                alert("error");
            }
        }
    });
});

我希望在列表视图中使用自己的颜色显示这些值（在课程项目注释中），其中绿色表示“已完成”，黄色表示“待定”，红色表示“取消”。 This is a screenshot of the listview

我有可能做到这一点吗？提前谢谢。

Answer 1

我可能会遗漏一些东西但是......你不能在创建时设置它吗？

$("#listview").append("<a class='item' href='details.html?id=" + id + "&name=" + name + "&ic=" + ic + "&phone=" + phone + "&home=" + home + "&vehicle=" + vehicle + "&plat=" + plat + "&color=" + color + "&wash=" + wash + "'><span class='item-note'><p>" + stat + "</p></span><h2>" + name + " </h2></a>");

您可以根据“stat”字段设置类名或其他内容。

var bgColor = (stat == "done" ? "green" : (stat == "pending" ? "yellow" : "red");
$("#listview").append("<a class='item "+bgColor+"' href='details.html?id=" + id + "&name=" + name + "&ic=" + ic + "&phone=" + phone + "&home=" + home + "&vehicle=" + vehicle + "&plat=" + plat + "&color=" + color + "&wash=" + wash + "'><span class='item-note'><p>" + stat + "</p></span><h2>" + name + " </h2></a>");

根据插入数据库

1 个答案: