为什么颜色不会根据时间条件显示在文本区域中？ [关闭]答案

【问题标题】：Why does the color not display in the textarea based on time condition? [closed]为什么颜色不会根据时间条件显示在文本区域中？ [关闭]
【发布时间】：2020-02-22 20:49:48
【问题描述】：

我正在尝试让我的日历块根据当前时间改变颜色。

我在不同的时间（军事时间）创建了变量，并在条件语句中将它们与当前时间进行了比较。例如在这种情况下，我显示09:00 小于当前时间20:00。但是，当此条件为true时，页面上不执行颜色。

var dayTime = (moment().format('HH'))
var nine = '09';

console.log(nine);

var ten = '10';
var eleven = '11';
var twelve = '12';
var one = '13';
var two = '14';
var three = '15';
var four = '16';
var five = '17';

if (nine < dayTime) {
  $('#nineText').addclass('past');
}

.past {
  background-color: #ff6961;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://momentjs.com/downloads/moment.js"></script>
<div class="time-block">
  <div class="row">
    <div class="col-1">
      <p class='hour'>9AM</p>
    </div>
    <div class="col-10">
      <textarea id='nineText' class="form-control" type='text' placeholder='placeholder' rows="2.9"></textarea>
    </div>
    <div class="col-md-1">
      <button class="input-group-addon saveBtn btn-primary btn-lg" type="submit">Save</button>
    </div>
  </div>
</div>

我觉得我的逻辑是正确的，但我知道我错过了一步。

【问题讨论】：

你的css类不是present。
方法是addClass（不是addclass）

标签： javascript jquery html css momentjs

【解决方案1】：

方法是addClass不是addclass，你的类名和你在问题中提到的不一样。

var dayTime = new Date().getHours();
var nine = '09';
console.log(nine);
console.log("Current hours "  + dayTime);
var ten = '10';
var eleven = '11';
var twelve = '12';
var one = '13';
var two = '14';
var three = '15';
var four = '16';
var five = '17';





if (parseInt(nine) <= parseInt(dayTime)){
$('#nineText').addClass('present');
}

.present {
background-color: #ff6961;
color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "time-block">
  <div class ="row">
      <div class="col-1">
          <p class='hour'>9AM</p>
      </div>
      <div class="col-10">
          <textarea id ='nineText'  class="form-control"  type='text' placeholder= 'placeholder'  rows="2.9"></textarea>
      </div>
      <div class="col-md-1">
          <button class="input-group-addon saveBtn btn-primary btn-lg" type="submit">Save</button>
      </div>
  </div>
</div>

【讨论】：