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。

使用jquery在日历上选择并突出显示一天

3 个答案: