2

我正在尝试向 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中的网格的东西

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

编辑：我发出警报，cells.css('color')这是输出：起初rgb(11,4,0)

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

edit2：起初我尝试将颜色分配为blue和red字面意思。但是它不起作用（即使我正在与blueand进行比较red）。我猜 Javascript 不会编组red为 Hex 或 RGB，对吧？

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

4

2 回答 2

2

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

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

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

这是一个工作演示。

于 2012-11-07T02:33:12.850 回答
1

我假设 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/

于 2012-11-07T04:19:53.653 回答