0

私はカレンダーを持っていて、月のいずれかの日のマウスオーバーで土曜日から土曜日を強調表示しようとしています...したがって、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()は、年の週の配列を生成する別の関数です...しかし、ここにある必要はないと思います...そのままでは長すぎます!

だから私の質問は、はい、これは機能しますが、より良い方法はありませんか? 何か不足していますか？

4

1 に答える 1

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。

于 2012-05-08T09:45:16.513 に答える