单击时动态更改 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 扩展，例如 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/

Answer 2

只需在为单元格着色时添加一个类，然后检查它：

$('td').click( function(){

    var $td = $(this);

    if($td.hasClass('is-colour')) {
        $td.css('background-color','transparent')
            .removeClass('is-colour');
    else {
        $td.css('background-color',getRandomColor())
            .addClass('is-colour');
    }

});

Answer 3

我不能 100% 确定我是否正确理解了您，所以您想单击一个单元格并使其着色，如果它已经着色则使其变为白色？

如果是这样

$( function(){
    var default_background = 'rgba(0, 0, 0, 0)';

    $('td').click( function(){
        var $this = $(this),
            curr_background = $(this).css('background-color');

        if (curr_background === default_background){
            $this.css('background-color',getRandomColor);
        } else {
            $this.css('background-color', default_background);  
        }
    });
});

这里是小提琴http://jsfiddle.net/qL10e5xd/

Answer 4

检查默认值，然后生成新颜色，或者删除它。

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(){
        if ($(this).css('background-color') == 'rgba(0, 0, 0, 0)') {
            // if background-color isn't set, jQuery returns 'rgba(0, 0, 0, 0)'
            $(this).css('background-color',getRandomColor);
        } else {
            $(this).css('background-color','');
        }
    });
});

http://jsfiddle.net/nmav8d3n/

Answer 5

您可以使用此代码

$( function(){
    var clicked = flase;
    $('td').click( function(){
    if(!clicked){
            $(this).css({'background-color',getRandomColor});
            clicked = true;
    }
    else{
            $(this).css({'background-color','white'});
            clicked = false;
        }
    });
});