0

我正在为我的网站制作一个在线日历，并希望使用 jquery 的 removeClass 和 addClass 函数更改所选日期的背景。该脚本在第一次单击时工作正常，旧日的背景被移至默认颜色，并且单击的日期 (td) 突出显示。但是，随后的点击会保留其突出显示的颜色，这意味着我有多个选择的日子。

我尝试了一系列解决方案，包括 .on() live() 和其他帖子中的各种 if 函数。

$('#calendarGrid td').on("click", function() {  
    $('#calendarGrid td').removeClass('today');         
    $(this).addClass('today');
});

我的 CSS 看起来像这样：

#calendarGrid .wEnd{background: #DDD;}
#calendarGrid .wDay{background: #EEE;}
#calendarGrid .today{background: #99BBEE;}

并且没有把我的整张桌子放在这里是HTML

<table id="calendarGrid">
    <tr>
        <td name='2012-04-07' class='wEnd today' id='a6'>7</td>
        <td name='2012-04-08' class='wEnd' id='b0'>8</td>
        <td name='2012-04-09' class='wDay' id='b1'>9</td>
    </tr>
<table>

奇怪的是，当我有更多的 javascript 时，.today尽管它拾取了.todayCSS，但它的行为好像已被删除。

任何建议表示赞赏。

4

3 回答 3

1

我为你创建了一个JSFiddle。一切似乎都在工作......

HTML

<table id="calendarGrid" cellpadding="5" cellspacing="5" border="1">
    <tr>
        <td name='2012-04-07' class='wEnd today active' id='a6'>7</td>
        <td name='2012-04-08' class='wEnd' id='b0'>8</td>
        <td name='2012-04-09' class='wDay' id='b1'>9</td>
    </tr>
<table>

CSS 

#calendarGrid td{
    padding: 20px;
    cursor: pointer;
}

#calendarGrid td.active{
    background-color: #000;
    color: #fff;
}

JS 

$(document).ready(function(){
    $('#calendarGrid td').live('click', function(){
       $('#calendarGrid td').removeClass('active');
       $(this).addClass('active');
    });
});​

​</p>

​</p>

于 2012-04-11T00:50:38.260 回答
0

代码似乎是正确的。可能是 jquery 库中的一些错误。尝试将谷歌库放在脚本之前：

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
于 2012-04-11T01:04:06.930 回答
-1

您应该尝试toggleClass像这样使用：

$("#calendarGrid td").on('click', function(){
  //$(this) = #calendarGrid td 
    $(this).toggleClass("today");

})
于 2012-04-11T00:47:18.017 回答