jquery - 单击时动态更改 CSS 颜色属性

Question

我有一个生成随机颜色的函数，我想将该函数与 jQuery 在点击时 toggleClass 的功能结合使用。我想在点击时为 table 单元格生成一种独特的颜色，并在用户再次点击彩色单元格时删除生成的颜色(再次使其变为白色/无色)。

HTML 表格:

   <div id="container">
        <table id="table">
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>

        </table>
    </div>

颜色生成函数:

    function getRandomColor() {
        var letters = '0123456789ABCDEF'.split('');
        var color = '#';
        for (var i = 0; i < 6; i++ ) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }

为单元格指定颜色:

$( function(){
    $('td').click( function(){
            $(this).css('background-color',getRandomColor);
    });
});

Answer 1

注意使用 'rgba(0, 0, 0, 0)' 的解决方案仅适用于某些浏览器(例如 Chrome，但不适用于 IE)。此版本从正文中获取颜色以供引用(但任何未设置 background-colour 的元素都可以。

您可以将代码更改为 jQuery 扩展，称为 say toggleRandomColor，如下所示:

var blankColor = $('body').css('background-color');
$.fn.toggleRandomColor = function () {
    if ($(this).css('background-color') == blankColor) {
        $(this).css('background-color', getRandomColor);
    } else {
        $(this).css('background-color', '');
    }
};

然后像这样简单地使用它:

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

JSFiddle: http://jsfiddle.net/TrueBlueAussie/nmav8d3n/4/