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

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

$('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 2

注意使用'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 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);  
        }
    });
});

这里是fidle 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;
        }
    });
});

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

5 个答案: