jQuery - 如果单击并再次单击，则更改表格单元格颜色答案

【问题标题】：jQuery - change table cell color if clicked and clicked againjQuery - 如果单击并再次单击，则更改表格单元格颜色
【发布时间】：2014-01-02 12:02:43
【问题描述】：

好的，所以我有以下简单的代码，它将表格中选定单元格的背景颜色更改为红色。效果很好。

CSS：

.fixture-table td.team.on {
    background-color: red;
}

JS：

$(document).on('ready', function() {
    // change the color to red on table when clicked
    $('td').click( function() {
        $(this).toggleClass('on');
    });
});

我想要做的是当单击单元格时，变为红色。如果再次单击相同的单元格，则变为黄色。然后如果再次单击，更改为无背景颜色，因此具有三种状态。

谢谢

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我会添加一个数据属性来保存当前状态。然后根据这个状态改变类。

http://jsfiddle.net/NhT92/

$('td').click(function () {
    var cell = $(this),
        state = cell.data('state') || 'first';

    switch (state) {
        case 'first':
            cell.addClass('red');
            cell.data('state', 'second');
            break;
        case 'second':
            cell.addClass('yellow');
            cell.data('state', 'third');
            break;
        case 'third':
            cell.removeClass('red yellow');
            cell.data('state', 'first');
            break;
        default:
            break;
    }
});

CSS

.red {
    background-color: red;
}
.yellow {
    background-color: yellow;
}

【讨论】：

如果它符合您的需求，请不要忘记将其标记为正确答案:)

【解决方案2】：

CSS：

.redColor { background-color:red; }
.yellowColor { background-color:yellow; }
.noColor { background-color:#fff; }

JS：

$(document).on('ready', function() {

    $('td').click( function() {
        if($(this).hasClass('noColor')) {
          $(this).removeClass('noColor').addClass('redColor');
        }
        else if($(this).hasClass('redColor')){
          $(this).removeClass('redColor').addClass('yellowColor');
        }
        else{
          $(this).removeClass('yellowColor').addClass('noColor');
        }
    });

});

【讨论】：

@LeBen 是的，打错字了！