日历怎么做的单选功能？

Question

1、如题，日历单选功能。点击某个<td>后着色，再点击就还原无色。但是现在问题是这样：
先点击一个<td>着色了，然后点击其他<td>,这个新的<td>着色，原来的<td>颜色要还原。

2、现在的代码（就是多选了。怎么搞成单选，网上查的都是单选框和复选框）

            $('.td').click(function() {
                if($(this).hasClass(color)) {
                    $(this).removeClass(color);
                } else {
                    //加样式
                    $(this).addClass(color);
                }
            });
            
            

3、再描述清楚一点：截了个日历。比如现在点击24号，黄色。然后我要点击25号，25号要变成黄色；同时24号要去色。2里面代码已经做到多选了。

Answer 1

只要先去掉所有框的顏色，再加上對應的就好

$('.td').click(function() {
    if($(this).hasClass(color)) {
        $(this).removeClass(color);
    } else {
        // 去掉所有框的顏色
        $('.td').removeClass(color)
        $(this).addClass(color);
    }
});

Answer 2

和@Tomoe的代码差不多，简单优化了下：

var $tds = $('.td');
$tds.on('click', function (_, elem) {
    var $elem = $(elem);
    if ($elem.hasClass('color')) {
        $elem.removeClass('color');
    } else {
        $tds.removeClass('color');
        $elem.addClass('color');
    }

});

其实也可以把上一次点击的结果缓存起来，这样下次点击就不需要再查找了：

var $tds = $('.td'),
    $cache;//缓存
$tds.on('click', function (_, elem) {
    var $elem = $(elem);
    //如果重复点击同一个元素
    if ($elem.hasClass('color')) {
        $elem.removeClass('color');
        $cache = null;
        return;
    }
    //检查缓存
    if ($cache) {
        $cache.removeClass('color');
        $cache = null;
    }
    $elem.addClass('color');
});