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

Question

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

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');
    });
});

我要做的是在单击单元格时将其更改为红色。如果再次单击同一个单元格，则变为黄色。然后如果再次点击，则变为无背景色，这样就有了三种状态。

谢谢

Answer 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;
}