jquery removeClassが2回目または3回目のクリック後にCSSを取得していません。

Question

私は自分のウェブサイトのオンラインカレンダーを作成しており、jqueryのremoveClassとaddClass関数を使用して、選択した日の背景を変更したいと考えています。スクリプトは、最初のクリックで正常に機能し、古い日の背景がデフォルトの色に移動され、クリックされた日（td）が強調表示されます。ただし、その後のクリックでは強調表示された色が維持されます。つまり、複数の選択日があります。

私は、.on（）live（）と他の投稿からのさまざまなif関数を含むさまざまなソリューションを試しました。

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

私のCSSは次のようになります。私がいるかのように振る舞うよりJavaScriptを持っているとき

#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> 

です.todayが削除されましたが、CSSは.todayです。

アドバイスありがとうございます。

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

あなたはこのようtoggleClassを使用してみてください。

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

}) 

Answer 3

コードがcorrect.Probablyいくつかのスクリプトの前にGoogleのLIBSを入れjqueryのlibs.Tryのバグのようです：

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