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

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

});

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

2 个答案: