使用javascript添加类并没有按预期工作

Question

它应该检测当天的日子和当天的颜色。例如，今天是星期六所以这个词是＆＃34;星期六＆＃34;应该是红色的。我不知道为什么它不起作用我的所有代码似乎都是正确的。

我的问题是我的代码无法使用javascript或jquery

在这里演示：https://www.w3schools.com/code/tryit.asp?filename=FHSS5KGYJZHA

代码：

＆＃13;

＆＃13;

  var d = new Date();
                     var n = d.getDay();
                     var res = document.getElementsByClassName("week-day");
          

          

                     if(n===0) //sunday
                     {
                          res.className += " today";;
                     }
                     else if(n===1) //monday
                     {
                         res.className += " today";
                     }
                     else if(n===2)
                     {
                          res.className += " today";
                     }
                     else if(n===3)
                     {
                          res.className += " today";
                     }
                     else if(n===4)
                     {
                         res.className += " today";
                     }
                     else if(n===5)
                     {
                    res.className += " today";                     }
                     else if(n===6) //saturday
                     {
                        res.className += "today";

                        
                     }

＆＃13;

.today{
color:red;
}

＆＃13;

<div class="span3">
                    <div class="opening-time">
                        <div class="time-table">
                            <h3><span class="icon icons-ornament-left"></span> <span class="light">OPENING</span> TIME <span class="icon icons-ornament-right"></span></h3>
                            <div class="inner-bg">
                                <dl id="asd" class="week-day">
                                    <dt>Monday</dt>
                                    <dd>9:00-18:00</dd>
                                </dl>
                                <dl id="asd" class="week-day light-bg ">
                                    <dt>Tuesday</dt>
                                    <dd>9:00-18:00</dd>
                                </dl>
                                <dl id="asd" class="week-day ">
                                    <dt>Wednesday</dt>
                                    <dd>8:00-18:00</dd>
                                </dl>
                                <dl id="asd" class="week-day light-bg ">
                                    <dt>Thursday</dt>
                                    <dd>9:00-18:00</dd>
                                </dl>
                                <dl id="asd" class="week-day">
                                    <dt>Friday</dt>
                                    <dd>9:00-18:00</dd>
                                </dl>
                                <dl id="asd"  class="week-day  light-bg">
                                    <dt>Saturday</dt>
                                    <dd>9:00-18:00</dd>
                                </dl>
                                <dl id="asd" class="week-day closed">
                                    <dt>Sunday</dt>
                                    <dd>CLOSED</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

抱歉jQuery，但对我来说更容易

jQuery(document).ready(function(){

  var d = new Date();
  var n = d.getDay();
  if ( n == 0 ) n = 7 ; // Just for your sunday

 jQuery('div.inner-bg dl:nth-child('+n+')').addClass('today') ;

}) ;

.today{
color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="span3">
                    <div class="opening-time">
                        <div class="time-table">
                            <h3><span class="icon icons-ornament-left"></span> <span class="light">OPENING</span> TIME <span class="icon icons-ornament-right"></span></h3>
                            <div class="inner-bg">
                                <dl id="asd" class="week-day">
                                    <dt>Monday</dt>
                                    <dd>9:00-18:00</dd>
                                </dl>
                                <dl id="asd" class="week-day light-bg ">
                                    <dt>Tuesday</dt>
                                    <dd>9:00-18:00</dd>
                                </dl>
                                <dl id="asd" class="week-day ">
                                    <dt>Wednesday</dt>
                                    <dd>8:00-18:00</dd>
                                </dl>
                                <dl id="asd" class="week-day light-bg ">
                                    <dt>Thursday</dt>
                                    <dd>9:00-18:00</dd>
                                </dl>
                                <dl id="asd" class="week-day">
                                    <dt>Friday</dt>
                                    <dd>9:00-18:00</dd>
                                </dl>
                                <dl id="asd"  class="week-day  light-bg">
                                    <dt>Saturday</dt>
                                    <dd>9:00-18:00</dd>
                                </dl>
                                <dl id="asd" class="week-day closed">
                                    <dt>Sunday</dt>
                                    <dd>CLOSED</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>