使用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）应该决定我将拥有哪个复选框标签（span）的新颜色。 如果没有选择 - ＆gt;而如果选择 - >绿色。

我有这种行为的工作版本： 当我按下href“save”时，我向php发送ajax请求，然后在服务器端我写了复选框状态的新值。然后我创建并回显隐藏的DIV（稍后它的内容将是eval（）以应用新样式）具有基于复选框的当前服务器数据的特定样式。 然后在Ajax I eval（）中隐藏DIV的内容，并以这种方式为复选框应用基于服务器数据的新样式。

挑战是从eval（）迁移到JSON + JSON.parse（）。 我知道如何使用JSON更新多个DIV内容（在Ajax中我硬编码哪个DIV具有要更新的特定ID）。但我的情况有点不同，因为我需要在服务器端决定要更新哪个元素（基于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]);
        }
    }
});