Question

我有一个日历，我试图突出显示星期六到星期六鼠标悬停在本月的任何一天...所以如果你在5月7日星期一过夜，它将突出显示星期六5日 - 星期六12日。

我已经通过以下方式进行了管理。日历是用php动态生成的，所以每一天都是这样的：

<td class="calendar-day week_number_' . $this_week_number . '">
    <div class="hello" id="day_' . $list_day . '"><div class="day-number">' . $list_day . '</div>'
</td>

'week_number_ . $this_week_number'是在星期六至星期六的每周生成的，星期六共享2周，这两个课程都适用，例如，一年中第一个可用的星期是week_number_1（这是一个假日小屋，所以不是所有的周都会开放）。 $list_day是其他地方每天生成的日期。

使用页面底部的以下jquery进行突出显示：

$('.hello').mouseover(function() {
    var day = $(this).attr('id');
    $.post('/modules/calendar/get_week_number2', { month:" . $month . ", day:day, year:" . $year . " }, function(data) {
        $('.calendar-day').siblings('.week_number_'+data).css('background', 'yellow');
    });
});

$('.hello').mouseleave(function() {
    var day = $(this).attr('id');
    $.post('/modules/calendar/get_week_number2', { month:" . $month . ", day:day, year:" . $year . " }, function(data) {
        $('.calendar-day').siblings('.week_number_'+data).css('background', 'red');
    });
});

这是在Codeigniter中完成的，所以这个jquery生成并插入到页面底部，只是为了解释那里的php变量。最后get_week_number2是一个确定要突出显示哪一周的函数......

public function get_week_number2() {
    $month = $_POST['month'];
    $day = str_replace("day_", "", $_POST['day']);
    $year = $_POST['year'];
    $date = date('Y-m-d H:i:s', mktime(0,0,0,$month,$day,$year));
    $date2 = strtotime($date);
    foreach($this->weeks_in_year() AS $week_number => $week)
    {
        if($date2 > strtotime($week['from']) AND $date2 < strtotime($week['to']))
        {
            echo $week_number;
        }
    }
}

$this->weeks_in_year()是另一个在一年中生成一周数周的函数......但我认为不需要在这里......它的时间太长了！

所以我的问题是，是的，这有效，但是不是更好的方法吗？我错过了什么吗？

Answer 1

由于您似乎正在使用表格，因此可以说更好的方法是获取悬停的td元素的tr父级，并将样式应用于所有td个孩子那一排一举。也就是说，而不是找出兄弟姐妹和东西。

所以让我们说：

<td class="calendar_day">
    <div id="day_1"></div>
</td>

你可以去：

$('.calendar_day').on('mouseover', function () {

    // get the parent TR
    var $this = $(this),
        $row = $this.parent('tr')
        ;

    // then apply a style that highlights every cell in that row
    $row.find('tr').addClass('highlight'); // ... or whatever your logic is

});

然后你可以在mouseleave中反转它。

使用jquery突出显示多个div

1 个答案: