javascript - 尝试在表 td 上绑定(bind)点击操作

Question

我正在尝试向 html 表格的单元格添加点击操作。

这是我的 Javascript:

$(document)
    .ready(

function () {
    function setColor(cell) {
        var cssRed = {
            "color": '#ff0000'
        }
        var cssBlue = {
            "color": '#0000ff'
        }
        if (cell.css('color') == '#ff0000') cell.css(cssBlue);
        else cell.css(cssRed);
    }
    $('td').click(function () {
        setColor($(this));
    });
});

这是我的 HTML

    <table style="text-align: center" border='1'>
    <tbody>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
        <tr>
            <td>Data</td>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>

它应该改变被点击单元格内文本的颜色。我正在尝试制作类似于 http://whenisgood.com 中的网格的东西

虽然，由于某种原因，它一直进入if的else语句(在setColor方法中)。显然，这种比较 cell.css('color') == '#ff0000' 每次都失败了。我在这里做错了什么？

编辑:我发出了 cells.css('color') 的警报，这是输出:首先 rgb(11,4,0​​)

然后在第二次点击之后:rgb(255,0,0)

edit2:起初我尝试按字面意思将颜色指定为 blue 和 red。但是它不起作用(即使我正在与 blue 和 red 进行比较)。我猜 Javascript 不会将 red 编码为 Hex 或 RGB，对吗？

edit3:如果您投反对票，请告诉我原因，我会尝试更新问题以使其变得更好。

Answer 1

不同的浏览器可能会像人们建议的那样返回不同的颜色值。

jQuery 的 css() documentation证实了这一点。

Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).

所以我建议改用 CSS 类:

CSS

.red {
    color: #ff0000;
}
.blue {
    color: #0000ff;
}

jQuery

$(document)
.ready(
        function() {
            function setColor(cell){
                var shouldSwitch = cell.hasClass("red");
                cell.toggleClass("red", !shouldSwitch);
                cell.toggleClass("blue", shouldSwitch);

            }
                $('td').click(function(){
                    setColor($(this));
                  });
            });

Here's a working demo.