Question

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

我尝试了一系列解决方案，包括.on（）live（）和各种其他帖子的功能。

$('#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被删除了，尽管它已经拿起了.today CSS。

任何建议表示赞赏。

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

Answer 2

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

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Answer 3

您应该尝试使用toggleClass，如下所示：

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

})

第二次或第三次点击后，jquery removeClass没有获取CSS。

3 个答案: