Изучение нескольких элементов для определения их цвета с использованием JQuery

Question

Я строю базовый график производительности c, и мне нужен способ установить цвет различных временных блоков на серый, красный или зеленый в зависимости от того, находятся они в прошлом, настоящем или будущем. Например, если мы в настоящее время находимся в 5 часов, этот временной блок с текстом запланированного события должен быть красным.

Следующий код - это то, что я пробовал, но я не могу заставить его работать

HTML - используя bootstrap. У меня есть 8 из этих рядов, по одному на каждый час рабочего дня (9-5). Обратите внимание на атрибут data-time. Он установлен в любой час, который он представляет.

      <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");
    }
    });

Answer 1

Вместо того, чтобы смешивать jQuery и Vanilla JS, я кодировал все в jQuery.

Основная проблема заключается в том, что .rows - это массив div s - то есть

var rows = $("div.row")

Итак, вам нужно пройтись по каждому элементу в массиве, чтобы определить его значение и изменить его цвет bg в соответствии с атрибутом data-time.

См. Демонстрацию ниже

// getting current hours from timestamp;
var date = new Date();
var time = date.getHours();

// once document is loaded and ready
$(document).ready(function() {
  var rows = $("div.row")

  // rows is an array of divs, let's work with each element one by one 
  $.each(rows, function(idx, row) {
    //remove previous classes assigned to it (this may not be necessary)
    $(row).removeClass("past");
    $(row).removeClass("present");
    $(row).removeClass("future");

    // Read the value of the data-time attribute & turn it into a number
    var dataAttString = $(row).data('time');
    var dataAttNum = Number(dataAttString);

    // assign a CSS class according to the current hour (calculated at the beginning)
    if (dataAttNum < time) {
      $(row).addClass("past");
    } else if (dataAttNum === time) {
      $(row).addClass("present");
    } else if (dataAttNum > time) {
      $(row).addClass("future");
    }
  });
});

/* CSS Classes */
.past {
  background-color: lightgray;
}

.present {
  background-color: lightgreen;
}

.future {
  background-color: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" data-time="0000">
  <div class="col-md-3">
    <p>0001</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 class="row" data-time="12">
    <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>

Answer 2

Попробуйте это.

$(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");
    }

})
    });