时间戳

首页 > 解决方案 > 寻找替换 Javascript 中的类属性

javascript - 寻找替换 Javascript 中的类属性

问题描述

我需要根据一天中的时间用来自 moment.js 的信息替换 textarea 的背景颜色。每种颜色取决于 moment.js 时间是否小于、等于或大于条目。这将在日程安排/日历中使用。我尝试了两种不同的代码，但都不起作用。我是编码新手，上课 6 周。

    var correctTime = moment().hour();
    var time9 = 9;
    var time10 = 10;

    function rightColor() {
    if (correctTime > time9) {
        $("#box9").addClass("past");  
    }
    else if (correctTime >= time9 && correctTime < time10) {
        $("#box9").addClass("present");
        $("#box9").removeClass("past");
    }
    else (correctTime < time9); {
        $("#box9").addClass("future");
        $("#box9").removeClass("present");
        $("#box9").removeClass("past");
    }
}

第二种方法使用 switch 语句。

var correctTime = moment().hour();
    var time17 = 17;
    var time18 = 18;

    switch(time17) {
    case correctTime > time17:
        switchClass("box5").addClass("past");
        break;
    case correctTime >= time17 && correctTime < time18:
        switchClass("box5").addClass("present");
        break;
    case correctTime < time17:
        switchClass("box5").addClass("future");
        break;  
        default: 
    }

CSS 部分。


  .past {
    background-color: #d3d3d3;
    color: white;
    font-size: 30px;
    text-shadow: black 2px 2px;
  }

  .present {
    background-color: #ff6961;
    color: white;
    font-size: 30px;
    text-shadow: black 2px 2px;
  }

  .future {
    background-color: #77dd77;
    color: white;
    font-size: 30px;
    text-shadow: black 2px 2px;
  }



 <tr>
            <div class = "col-md-2">
              <th scope="row" id="9amTime" class="timeOfDay">9:00am</th>
            </div>
            <div class = "col-md-8">
              <td class="event-box"><textarea class="text-box" value="" id="box9"></textarea></td>
            </div>
            <div class = "col-md-2">
              <td class="save-box"><button id="save9am" class="btn btn-outline-secondary saveBtn" type="button"><i
                class="far fa-save"></i></button></td>
            </div>
          </tr>

标签： javascriptjquerycss

解决方案

函数调用似乎存在问题，因为您要么提前调用函数（即在页面加载之前；因为您使用的是 jQuery，所以使用document.ready侦听器或其简写形式），或者它没有被调用全部。

我用你提供的代码做了这个小提琴，在纠正了一些小问题之后，代码可以工作了：

https://jsfiddle.net/o9rhbn4k/

请注意，您的代码存在一些问题：

   else (correctTime < time9); {

您缺少if，并且;不需要 。那行应该是：

else if (correctTime < time9) {

无论如何，看看fiddle并改变correctTime变量的值，textarea的背景就会更新。

希望这可以帮助。

推荐阅读