使用 ajax 表 td 的 addClass/removeClass答案

【问题标题】：the use of addClass/removeClass of a table td with ajax使用 ajax 表 td 的 addClass/removeClass
【发布时间】：2014-10-15 22:12:39
【问题描述】：

以下代码输出一个带有值的表格，并根据该值得到一个布局。我使用 jQuery (Ajax) 每 10 秒更新一次信息。

生成所需变量并将它们存储（回显）到 json 数组（example.php）中的 php 脚本

$variable1 = 20;

if ($variable1 > 0) {
$td_variable1class="positive";
} else {
$td_variable1class="negative";
}

$array['variable1']      = $variable1;
$array['td_variable1']   = $td_variable1;

echo json_encode($array);

从example.php生成的json中检索变量的html表：

<table>
    <tr>
        <td class='variable1class'>
        <div id='variable1'></div>
        </td>
    </tr>
</table>

javascript:

<script type="text/javascript">
   $(function() {
     refresh();
    });

    function refresh() {
         $.getJSON('example.php', function(data) {
            $('div#variable1').html(data.variable1);
            $('td.td_variable1').addClass(data.td_variable1);
       });
    setTimeout("refresh()",10000);
   }

问题是“addClass”向现有类添加一个类，导致输出如下：

刷新前：

<td class="td_variable1 positive">

之后（假设变量由正变负）：

<td class="td_variable1 positive negative">

我试图通过使用 removeclass 来避免这种情况：

$('td.td_variable1').removeClass().addClass(data.td_variable1);

但随后 td 的实际类名被删除，我的输出如下所示：

<td class="negative">

它应该是这样的：

<td class="td_variable1 negative">

提前感谢您的帮助！

【问题讨论】：

下面的 cmets 令人困惑。你能简单地从浏览器中保存一个示例页面，以便我们可以看到生成的代码和 HTML（不仅仅是源代码）吗？

标签： javascript jquery ajax addclass removeclass

【解决方案1】：

假设您只有这 2 个选项，请删除这两个（并且只有这两个），然后添加新的：

$('td.td_variable1').removeClass("positive negative").addClass(data.td_variable1);

【讨论】：

类本身也是可变的，所以我不能添加所有这些类。我试过这个： $('td.td_variable1').removeClass(data.td_variable1).addClass(data.td_variable1);但这无济于事，它一直在添加。
@Roddeh：目标不明确......你将如何区分你想要保持不变的类和那些被修改的类？（例如保留td_variable1）
我只想更新它们，并删除现有的类。问题是它不断添加类，我希望它们先被删除，然后再替换。
@Roddeh：代码不清楚您如何管理名称。你在任何地方都有所有可能的类名的数组/集合吗？
我担心我将不得不按照您的建议手动删除它们。是的，这是一长串课程。如果第一部分可以保留在原地而只有最后一部分会被删除，那会更容易，但我想那是不可能的:)。感谢您的帮助！

【解决方案2】：

.removeClass() 在没有给出任何参数时删除所有类。请改用.removeClass("negative")。

【讨论】：