使用 jquery 突出显示多个 div

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 中反转它。