Entiendo cómo obtener la hora actual con el momento, ahora solo estoy tratando de comparar la hora con la ID de mi div. mis identificadores div son veces En el formato H: MM
HTML:
<div id="11:00" class="row time-div">lo que tengo hasta ahora Javascript:
//checking if the time slot is in the past present or future //add classes to change style accordingly $(".time-div").each(function () { var timeDiv = $(this).attr("id").val(); if (currentHour == timeDiv) { $(this).addClass("present"); } else if (currentHour < timeDiv) { $(this).removeClass("present"); $(this).addClass("future"); } else if (currentHour > timeDiv) { $(this).removeClass("future"); $(this).addClass("past"); } });Lo siguiente solo funciona durante 24 horas:
let timedivs = document.querySelectorAll(".time-div"); var today = new Date(); timedivs.forEach((div) => { const idVal = div.id.split(":"); const totalDivTime = idVal[0] * 3600 + idVal[1] * 60; const currentTimeTotal = today.getHours() * 3600 + today.getMinutes() * 60; if (currentTimeTotal > totalDivTime) { div.classList.add("past"); div.innerHTML = "past will be added"; } else if (currentTimeTotal < totalDivTime) { div.classList.add("future"); div.innerHTML = "future will be added"; } else { div.classList.add("present"); div.innerHTML = "present will be added"; } }); <div id="22:00" class="row time-div"></div> <div id="12:00" class="row time-div"></div>pruébelo: (nota: debe mover los datos al conjunto de datos del elemento, y solo funciona durante una hora)
$('button').on('click', function(){ let currentHour = $(this).data('hour') $(".time-div").each(function () { let timeDiv = $(this).attr('id') if (currentHour == timeDiv) { $(this).removeClass("future") $(this).removeClass("past") $(this).addClass("present") } else if (currentHour < timeDiv) { $(this).removeClass("present") $(this).removeClass("past") $(this).addClass("future") } else if (currentHour > timeDiv) { $(this).removeClass("present") $(this).removeClass("future") $(this).addClass("past") } }) $(".time-div-data-set").each(function () { let timeDiv = $(this).data('hour') if (currentHour == timeDiv) { $(this).removeClass("future") $(this).removeClass("past") $(this).addClass("present") } else if (currentHour < timeDiv) { $(this).removeClass("present") $(this).removeClass("past") $(this).addClass("future") } else if (currentHour > timeDiv) { $(this).removeClass("present") $(this).removeClass("future") $(this).addClass("past") } }) }) .time-div{ width: 100px; height : 100px; float:left; margin-right: 10px; text-align:center; } #time-div-data-set{ float:left; } .present{ background-color: red; } .future{ background-color: blue; } .past{ background-color: yellow; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="11:00" class="row time-div">abc</div> <button id='future' data-hour='09:00'>future</button> <button id='present' data-hour='11:00'>present</button> <button id='past' data-hour='13:00'>past</button> <div data-hour="11:00" class="row time-div time-div-data-set">xyz</div>