使用 Ajax + JSON 动态改变元素 CSS 样式答案

【问题标题】：Dynamiclly change element CSS style using Ajax + JSON使用 Ajax + JSON 动态改变元素 CSS 样式
【发布时间】：2012-01-20 21:42:55
【问题描述】：

为了简化问题，假设我有一组复选框（如果选中 - 应用了特定样式）和一个 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）应该决定我将拥有哪种新颜色的复选框标签（跨度）。如果未选中 -> while，如果选中 -> 绿色。

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

挑战是从 eval() 迁移到 JSON+JSON.parse()。我知道如何使用 JSON 更新多个 DIV 内容（在 Ajax 中，我用特定的 ID 硬编码哪个 DIV 来更新）。但我的情况有点不同，因为我需要在服务器端决定更新哪个元素（基于数据库记录）。

我不需要 JS 或 JQuery 中的硬编码代码在哪个元素上应用样式，但是应该根据服务器端的语法来选择哪个元素。

我可以用 JSON 做到这一点吗？

请提供一个逻辑或一个简单的例子来说明我如何做到这一点。

提前感谢您的帮助！

【问题讨论】：

Ajax + JSON = Ajaj？这可能会有所帮助 - stackoverflow.com/questions/1036028/…

标签： php jquery ajax json

【解决方案1】：

您可以使用 jQuery 轻松更改它：

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

【讨论】：

正如我提到的：我需要在服务器端决定要更改哪个元素的样式。在您的代码中，元素 ID 在 JQuery 中硬编码
复选框由您的浏览器绘制，因此您必须在客户端确定它们的颜色。您可以从服务器发送颜色值，然后使用上述语法设置它，或者根据客户端的复选框值决定颜色（然后您只需要保存值而不必等待服务器响应以获取颜色）

【解决方案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]);
        }
    }
});

【讨论】：