使用jquery选择和突出显示日历上的某一天

Question

我有以下标记：

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

但它不起作用。我还想选择我正在点击的项目的值，例如日期

Answer 1

您正在使用each()、closest()和children()执行的遍历不是必需的，请尝试如下所示：

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

Answer 2

$('body').on('click', '.january > li > a', function() {

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

}和)的顺序不正确。

Answer 3

我认为您在绑定事件到链接时遇到了问题。

我使用这个脚本：

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

此脚本为addClass绑定事件单击。