Dynamiclly使用Ajax + JSON更改元素CSS樣式

爲了簡化問題，假設我有一組複選框（如果選中 - 應用了特定樣式）和href鏈接。Dynamiclly使用Ajax + JSON更改元素CSS樣式

<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>

enter image description here

的複選框的狀態的值存儲在數據庫中。服務器（PHP）應該決定我將擁有的複選框標籤（跨度）的哪種新顏色。如果未選中 - > while，如果選中 - >綠色。

我有這種行爲的工作版本：當我按href「保存」，我發送ajax請求到php，然後在服務器端我寫的複選框的狀態的新值。然後，我創建並回顯隱藏的DIV（稍後它的內容將是eval（）以應用新樣式），並使用基於當前複選框的服務器數據的特定樣式。然後在Ajax中，我eval（）隱藏DIV的內容，並以這種方式應用基於服務器數據的新樣式複選框。

挑戰是從eval（）遷移到JSON + JSON.parse（）。我知道如何用JSON更新多個DIV內容（在Ajax中，我硬編碼哪個DIV需要更新特定ID）。但是我的情況有些不同，因爲我需要在服務器端決定要更新哪個元素（基於數據庫記錄）。

我不需要在JS或JQuery的硬編碼的碼上哪個元素應用樣式，但這些元素應根據服務器端進行語法選擇。

我可以用JSON嗎？

請提供一個邏輯或簡單的例子，說明如何做到這一點。

非常感謝您的幫助！

來源

2012-01-20 ihtus

Ajax + JSON = Ajaj？我需要在服務器端該元素的樣式改變決定：正如我所說http://stackoverflow.com/questions/1036028/get-json-data-back-from-ajax-call – jrummell

，你可以用jQuery輕易改變它：

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

來源

2012-01-20 21:46:32 lynxoid

- 這可能是有幫助的。在你的代碼中的元素ID在JQuery的硬編碼 – ihtus

複選框是由瀏覽器繪製的，所以你必須要確定其對客戶端的顏色。您可以從服務器基於複選框在客戶端的值（那麼你只需要保存的值，並且沒有等待發送的顏色值，然後將其設置使用上述語法，或決定顏色服務器響應以獲取顏色） – lynxoid

我不知道你的數據是什麼格式，但是我們要說它看起來是這樣的：

{"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]); 
     } 
    } 
});

來源

2012-01-20 21:53:43 FtDRbwLXw6

Dynamiclly使用Ajax + JSON更改元素CSS樣式

回答

相關問題