jquery removeClass 在第二次或第三次点击后没有拾取 CSS

jquery removeClass is not picking up CSS after second or third click.

本文关键字：CSS removeClass 第二次 第三次 jquery      更新时间：2023-09-26

我正在为我的网站制作一个在线日历，并希望使用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 CSS，但它的行为就好像.today已被删除一样。

任何建议表示赞赏。

我为你创建了一个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');
    });
});​

​

​

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

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

你应该尝试使用这样的toggleClass：

$("#calendarGrid td").on('click', function(){
  //$(this) = #calendarGrid td 
    $(this).toggleClass("today");
})
相关文章：