2012-02-28 16 views
0

でカレンダー上の日を強調し、私は次のマークアップがあります。ここでは選択とjQuery

<div class="calendar"> 
    <div class="heading"> 
     <a class="previous-month" href="javascript:;"></a> 
     <h1 class="hmc">February&nbsp;2012</h1> 
     <a class="next-month" href="javascript:;"></a> 
    </div> 

    <ul class="week hmc"> 
     <li>Su</li> 
     <li>Mo</li> 
     <li>Tu</li> 
     <li>We</li> 
     <li>Th</li> 
     <li>Fr</li> 
     <li>Sa</li> 
    </ul> 

    <ul class="january days hmc current"> 
     <li>&nbsp;</li> 
     <li>&nbsp;</li> 
     <li>&nbsp;</li> 
     <li><a href="javascript:;">1</a></li> 
     <li><a href="javascript:;">2</a></li> 
     <li><a href="javascript:;">3</a></li> 
     <li><a href="javascript:;">4</a></li> 
     <li><a href="javascript:;">5</a></li> 
     <li><a href="javascript:;">6</a></li> 
     <li><a href="javascript:;">7</a></li> 
     <li><a href="javascript:;">8</a></li> 
     <li><a href="javascript:;">9</a></li> 
     <li><a href="javascript:;">10</a></li> 
     <li><a href="javascript:;">11</a></li> 
     <li><a href="javascript:;">12</a></li> 
     <li><a href="javascript:;">13</a></li> 
     <li><a href="javascript:;">14</a></li> 
     <li><a href="javascript:;">15</a></li> 
     <li><a href="javascript:;">16</a></li> 
     <li><a href="javascript:;">17</a></li> 
     <li><a href="javascript:;">18</a></li> 
     <li><a href="javascript:;">19</a></li> 
     <li><a href="javascript:;">20</a></li> 
     <li><a href="javascript:;">21</a></li> 
     <li><a href="javascript:;">22</a></li> 
     <li><a href="javascript:;">23</a></li> 
     <li><a href="javascript:;">24</a></li> 
     <li><a href="javascript:;">25</a></li> 
     <li><a href="javascript:;">26</a></li> 
     <li><a href="javascript:;">27</a></li> 
     <li><a class="alt current" href="javascript:;">28</a></li> 
     <li><a href="javascript:;">29</a></li> 
     <li>&nbsp;</li> 
     <li>&nbsp;</li> 
     <li>&nbsp;</li> 
    </ul> 
</div> 

を私はカレンダーを生成します。私はクリックしている現在の日を強調したい。私は試しました:

$('body').on('click', '.january > li > a', function() {    
    $(this).closest('.january').children('li').each(function() { 
     var anchor = $(this).children('a'); 
     anchor.addClass('alt current'); 
    )} 
)} 

しかし、それは動作しません。また、私がクリックしているアイテムの値を選択したいとします。その日は

+0

jsfiddleでこれを設定してURLで更新できますか? – naresh

+0

HTMLを正しくフォーマットする方法をお読みください。 –

+0

'alt current'にはcssルールセット(クラス)がありますか? –

答えて

1

あなたはeach()でやっているトラバーサル、closest()children()は必要ありません、これを試してみてください。

$('body').on('click', '.january > li > a', function() { 
    $(".january > li > a").removeClass("alt current");    
    $(this).addClass('alt current'); 
}); 
0
$('body').on('click', '.january > li > a', function() { 

     $(this).closest('.january').children('li').each(function() { 
      var anchor = $(this).children('a'); 
      anchor.addClass('alt current'); 
     }); 
}); 

です。}と)の順序は正しい順序ではありません。

+0

です。コードではそうではありませんでした – Mythriel

0

私はあなたがリンクにバインドイベントに問題があると思います。

$(document).ready(function(){ 
    $(".january li a").click(function(){ 
     $(this).addClass('alt current'); 
    }); 
}); 

このスクリプトバインドイベントがaddClassのためにクリックしてください:

私はこのスクリプトを使用します。