Question

我有一个简单的课程日历，如果是一周的那一天，我希望日期栏不同。

E.G。如果是星期三，则星期三列不同

我一直在玩，但无济于事，在论坛中搜索。而且我已经到了这一步。

我对任何新方法持开放态度。感谢。

脚本

<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script> 
<script>
$('.fc-today').prevAll('ul').css('backgroundColor','yellow');
$('.fc-today').parent().prevAll().find('ul').css('backgroundColor','yellow');
</script>

HTML

<div class="calendar-daycontent fc-mon">
    <ul>
    <a href="###">
        <li class="class-time">
            11.00 - 12.00
        </li>
        <li class="class-header">
            Class
        </li>
        <li class="class-inst">
            Instructor
        </li>
        </a>
    </ul>
</div>

<div class="calendar-daycontent fc-tue">
    <ul>
    <a href="###">
        <li class="class-time">
            11.00 - 12.00
        </li>
        <li class="class-header">
            Class
        </li>
        <li class="class-inst">
            Instructor
        </li>
        </a>
    </ul>
</div>

<div class="calendar-daycontent fc-wed">
    <ul>
    <a href="###">
        <li class="class-time">
            11.00 - 12.00
        </li>
        <li class="class-header">
            Class
        </li>
        <li class="class-inst">
            Instructor
        </li>
        </a>
    </ul>
</div>

<div class="calendar-daycontent fc-thu">
    <ul>
    <a href="###">
        <li class="class-time">
            11.00 - 12.00
        </li>
        <li class="class-header">
            Class
        </li>
        <li class="class-inst">
            Instructor
        </li>
        </a>
    </ul>
</div>

<div class="calendar-daycontent fc-fri">
    <ul>
    <a href="###">
        <li class="class-time">
            11.00 - 12.00
        </li>
        <li class="class-header">
            Class
        </li>
        <li class="class-inst">
            Instructor
        </li>
        </a>
    </ul>
</div>

<div class="calendar-daycontent fc-sat">
    <ul>
    <a href="###">
        <li class="class-time">
            11.00 - 12.00
        </li>
        <li class="class-header">
            Class
        </li>
        <li class="class-inst">
            Instructor
        </li>
        </a>
    </ul>
</div>

<div class="calendar-daycontent fc-sun">
    <ul>
    <a href="###">
        <li class="class-time">
            11.00 - 12.00
        </li>
        <li class="class-header">
            Class
        </li>
        <li class="class-inst">
            Instructor
        </li>
        </a>
    </ul>
</div>

CSS

div.calendar-daycontent {
float : left ;
width : 138px ;
margin : 1px ;
display : block ;
}

    div.calendar-daycontent ul {
    float : left ;
    width : 100% ;
    display : block ;
    margin-bottom : 2px ;
    }

    .fc-mon ul {background-color:Red;}
    .fc-tue ul {background-color:green;}
    .fc-wed ul {background-color:blue;}
    .fc-thu ul {background-color:Red;}
    .fc-fri ul {background-color:Red;}
    .fc-sat ul {background-color:green;}
    .fc-sun ul {background-color:blue;}

    .fc-today ul {}

    div.calendar-daycontent ul a:link, div.calendar-daycontent ul a:visited {
    float : left ;
    width : 122px ;
    display : block ;
    padding : 12px 8px ;
    text-decoration : none ;
    }

    div.calendar-daycontent ul a:hover {
    float : left ;
    width : 122px ;
    display : block ;
    padding : 12px 8px ;
    text-decoration : none ;
    background-color : #6bb925 ;
    -o-transition : .3s ;
    -ms-transition : .3s ;
    -moz-transition : .3s ;
    -webkit-transition : .3s;
    transition : .3s ;
    }

        div.calendar-daycontent ul li {
        float : left ;
        width : 100% ;
        display : block ;
        padding : 2px 0px ;
        color : #151515 ;
        text-align : center ;
        }

        div.calendar-daycontent ul li.class-header  {
        font-size : 15px ;
        font-weight : 800 ;
        text-transform : uppercase ;
        font-style : italic;
        color : #6bb925 ;
        margin-top : 2px ;
        margin-bottom : 1px ;
        }

            div.calendar-daycontent ul:hover li.class-header {
            color : #fff ;
            }

        div.calendar-daycontent ul li.class-inst {
        font-size : 12px ;
        font-weight : 800 ;
        }

        div.calendar-daycontent ul li.class-time {
        font-size : 11px ;
        font-weight : 800 ;
        }

        div.calendar-daycontent ul li.class-room {
        font-size : 11px ;
        }

Answer 1

尝试使用Date获取当周的当天：

$(function(){
  var day = new Date().getDay();
  day = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"][day];
  $('div.calendar-daycontent.fc-' + day + ' ul').css({'background':'yellow'});
});

Answer 2

像这样：fiddle

<强> JS

$(function() {
  var dayOfWeek = (new Date).getDay();
  var dayClasses = ['fc-sun', 'fc-mon', 'fc-tue', 'fc-wed', 'fc-thu', 'fc-fri', 'fc-sat'];
  $('.' + dayClasses[dayOfWeek] + ' ul').css('backgroundColor', 'yellow');
});

今天改变UL背景

2 个答案: