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里面代码已经做到多选了。
和@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');
});
只要先去掉所有框的顏色,再加上對應的就好
$('.td').click(function() {
if($(this).hasClass(color)) {
$(this).removeClass(color);
} else {
// 去掉所有框的顏色
$('.td').removeClass(color)
$(this).addClass(color);
}
});