0

Web サイト用のオンライン カレンダーを作成しており、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>

奇妙なことに、 CSS .todayを取得しているにもかかわらず、削除されたかのように動作する JavaScript がさらにある場合。.today

アドバイスをいただければ幸いです。

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 ライブラリのバグです。スクリプトの前に Google ライブラリを配置してみてください。

 <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 に答える