时间戳

首页 > 解决方案 > 使用 JQuery 检查多个元素以确定它们的颜色

jquery - 使用 JQuery 检查多个元素以确定它们的颜色

问题描述

我正在制定一个基本的生产力计划，我需要一种方法将不同时间块的颜色设置为灰色、红色或绿色，具体取决于它们是过去、现在还是未来。例如，如果我们现在正处于 5 点钟时，则带有预定事件文本的那个时间块需要是红色的。

以下代码是我尝试过的，但我无法让它工作

HTML - 使用引导程序。我有 8 行这些行，一个用于工作日（9-5）中的每个小时。记下数据时间属性。它设置为它所代表的任何小时。

      <div class = "row" data-time = "9">
        <div class = "col-md-3">
          <p>0900</p>
        </div>
        <div class = "col-md-6">
          <textarea class = "event-field"></textarea>
        </div>
        <div class = "col-md-3"><button type="submit" class="btn btn-primary"></button></div>
      </div>

var date = new Date();
var time = date.getHours();

$(document).ready(function() {
    var rows = $("div.row")
    var dataAttString = rows.dataset.time;
    var dataAttNum = Number(dataAttString);    

    if (dataAttNum < time) {
        rows.addClass("past");
    }
    else if (dataAttNum === time) {
        rows.addClass("present");
    }
    else if (dataAttNum > time) {
        rows.addClass("future");
    }
    });

标签： jquery

解决方案

尝试这个。

$(document).ready(function() {
    var date = new Date();
    var time = date.getHours();
    var rows = $("div.row")

rows.each(function(){
    var dataAttNum = $(this).data('time');    

    if (dataAttNum < time) {
        $(this).addClass("past");
    }
    else if (dataAttNum === time) {
        $(this).addClass("present");
    }
    else if (dataAttNum > time) {
        $(this).addClass("future");
    }

})
    });

推荐阅读