jquery - 删除多个类到 "Reset"Div

Question

在下面我自己的回答中解决:

Explanation: .removeClass() does not accept commas to list multiple classes.

---

我正在构建一个充满单元格的智能数据网格，这些单元格将识别(模糊地)它们是否被更改，以及值是上升还是下降。

这是它的样子。当用户将鼠标悬停在已更改的框上并告诉他们页面首次加载时的值是什么时，会出现灰色工具提示。

---

---

问题:当我降低一个单元格中的值，模糊，然后将其改回原来的值时，该单元格正确地删除了它已更改的所有指示(没有红色/绿色边框，没有箭头，无工具提示)。

但是，当我提高 单元格中的值、模糊，然后将其更改回原来的值时，它并没有消除绿色边框。我检查了我的代码，但不明白为什么它没有删除“up”类。

EXAMPLE: Change the top left cell from 12,000 to 11,000. Click off the cell. Notice the red border. Now change it back to 12,000. It should now be reset to grey.

Now change the value to 13,000. Click off the cell. Notice the green border. Now change it back to 12,000. It is still green when it should have reset to grey.

你们能帮我看看我的问题出在哪里吗？也许建议一种方法来浓缩我的“细胞重置”？

相关 HTML ( full code available HERE ):

<tr>
    <td><input type="text" value="12000" /></td>
    <td><input type="text" value="1000" /></td>
    <td><input type="text" value="100000" /></td>
</tr>

相关 CSS ( full code available HERE ):

.up { border:1px solid #0F0 !important; }
.down { border:1px solid #F00 !important; }

.down-indicator {
    // some styles to create a downward triangle
}

.up-indicator {
    // some styles to create an upward triangle
}

相关 jQuery ( full code available HERE ):

$(function() {
    var initialValues = [];

    $('input').each(function(index) {
        initialValues[index] = $(this).val();
        $(this).data('id', index);
    });


    $("input").blur(function() {
        var $t = parseInt($(this).val(), 10);
        var $s = parseInt(initialValues[$(this).data('id')], 10);

        // value has changed
        if($t != $s) {
            $(this).parent().append("<div class='tooltip'>" + $s + "</div>");
        }

        // value is the same as initial value
        if($t == $s) {
            $(this).removeClass("up, down");
            $(this).parent().children(".tooltip").remove();
            $(this).parent().children(".up-indicator, .down-indicator").remove();
        }

        // value went up
        else if($t > $s) {
            $(this).removeClass("up, down");
            $(this).parent().children(".up-indicator, .down-indicator").remove();
            $(this).addClass("up");
            $(this).parent().append("<div class='up-indicator'></div>");
        }

        // value went down
        else if($t < $s) {
            $(this).removeClass("up, down");
            $(this).parent().children(".up-indicator, .down-indicator").remove();
            $(this).addClass("down");
            $(this).parent().append("<div class='down-indicator'></div>");
        }
    });

Answer 1

我发现了我的问题。 .removeClass() 似乎没有使用逗号来分隔多个类。

旧代码:

$(this).removeClass("up, down");

固定代码:

$(this).removeClass("up down");

WORKING FIDDLE