使用jquery突出顯示多個div

Question

我有一個日曆，我想突出顯示週六到週六的任何一天的鼠標懸停......所以如果你在5月7日星期一凌晨它會突出顯示星期六5 - 星期六12。

我用下面的方法管理它。日曆動態用PHP生成的，因此，每個天看起來像這樣：

而每星期星期六至星期六和星期六2周共享產生

<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'具有施加兩個類，例如，第一個可用的周這一年將是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'); 
    }); 
}); 

這是笨這樣做這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

既然你似乎使用一個表，一個可以說是更好的方式是得到hover'ed 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。