データベースに挿入されたテキスト入力に基づいてテキストの色を変更します。

Question

以下に示すコードは、getURI関数を使用してSQLデータベースからフェッチされるjsonオブジェクトです。ユーザーがリストビューリストの1つをクリックした場合にのみ、この情報はすべて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」と呼ばれる変数があります。この変数には、sql tableに "done"、 "pending"または "cancel"の3つの値があり、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"); 
      } 
     } 
    }); 
}); 

私は自分の色で、これらの値の表示を行いたいですリストビュー（クラスitem-note）で、緑は「完了」、黄色は「保留中」、赤は「キャンセル」です。 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>");