Ajax + JSONを使用して動的にエレメントCSSスタイルを変更する

Question

質問を簡略化するために、チェックボックスのグループ（選択されている場合は、特定のスタイルが適用されます）とhrefリンクがあります。

<input type=checkbox style="color:#0f0; background:#0f0; border:1px solid;" name=CHKB_3D unchecked> 
<span id=CHKB_3D_span style="">3D Model</span><br/> 
<input type=checkbox name=CHKB_2D checked> 
<span id=CHKB_2D_span style="color:#00D100;">2D Drawing</span><br/> 
<input type=checkbox name=CHKB_ST checked> 
<span id=CHKB_ST_span style="color:#00D100;">Stack up</span><br/> 
<a onclick="ajax_json_styling()" href="javascript:void(0);">click me to change style!</a> 

チェックボックスステータスの値は、データベースに格納されています。 サーバー（PHP）は、新しい色のチェックボックスラベル（スパン）を決定する必要があります。 選択されていない場合は - >、選択されている場合は - >緑です。

私はこの動作の作業バージョンを持っています： 私はhref "save"を押すと、PHPにajaxリクエストを送信し、サーバー側でチェックボックスのステータスの新しい値を書き込みます。次に、隠しDIVを作成してエコーします（後で新しいスタイルを適用するeval（）になります）。チェックボックスの現在のサーバーデータに基づく特定のスタイルを使用します。次に、Ajaxで、隠しDIVの内容をeval（）し、チェックボックスのサーバーデータに基づいて新しいスタイルを適用します。

課題は、eval（）からJSON + JSON.parse（）に移行することです。 複数のDIVコンテンツをJSONで更新する方法を知っています（アップデートする特定のIDを持つDIVのAjax Iハードコード）。しかし、DBのレコードに基づいて更新する要素をサーバー側で決定する必要があるため、私の状況は少し異なります。

JSやJQueryでスタイリングを適用する要素はハードコードされている必要はありませんが、サーバー側に基づいてどの要素を文法的に行うかを選択する必要があります。

JSONでこれを行うことはできますか？

私はそれを行うための論理または簡単な例を提供してください。

ありがとうございました！

Answer 1

あなたはjQueryを使って簡単に変更することができます。

$("#your-div-id").css("your-attribute", "your-value"); 

Answer 2

を私はあなたのデータが入っているどのような形式を知っているが、のは、それは次のようになります言わせてはいけない：

{"checkboxes": {"CHKB_3D": "white", "CHKB_2D": "green", "CHKB_ST": "white"}} 

次に、あなたのAJAXコードは次のようになります。

$.ajax({ 
    url: '/some/server/script.php', 
    data: { /* stuff */ } 
    dataType: 'json', 
    success: function(data) { 
     for (var name in data.checkboxes) { 
      $('#' + name + '_span').css('color', data.checkboxes[name]); 
     } 
    } 
});