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不会用Hex或RGB编组red，对吗？

edit3：如果你是downvote，请让我知道为什么，我会尝试更新问题，以便它变得更好。

Answer 1

不同的浏览器可能会根据人们的建议返回不同的颜色值。

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

不同的浏览器可能会返回逻辑上但文本上不相等的CSS颜色值，例如＃FFF，＃fffff和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.

Answer 2

我假设td的默认颜色是红色。

所以只需将CSS设置为

即可

td{color:#ff0000;}
td.highlight{color:#0000ff;}

和脚本

$(document).ready(function () {
    function setColor(cell) {
        $(this).toggleClass('highlight');
    }
    $('td').click(setColor);
});

http://jsfiddle.net/zqytM/

演示

尝试绑定表td上的单击操作

2 个答案: