根据过去的时间更改div上的CSS类

Question

这里我有24个div作为一整天的时段，这些插槽包含一个小时的预订任何财产。

我在这里有两种类型的css类。一种是（.hour_slots_disabled），它们显示了上面的队列部分，第二种是（.hour_slots_disabled）。现在我想申请过去的禁用课程。即当前时间是16:40然后我想禁用那个16:00 - 17:00的时间段。和休息即将到来的时间段可供预订

以下是禁用这些时段的CSS

    .hour_slots_disabled
{
     height: 40px;
     width: 75px;
     cursor: not-allowed;
     background-color: #ccc;
     border-radius: 2px;
     -o-transition:.5s;
     -ms-transition:.5s;
     -moz-transition:.5s;
     -webkit-transition:.5s;
      transition:.5s;
}

这是我的24个div作为时段

<li><div class="hour_slots_available" id="12_01"><span class="hour_tag">12:00 - 01:00</span></div></li>
<li><div class="hour_slots_available" id="01_02"><span class="hour_tag">01:00 - 02:00</span></div></li>
<li><div class="hour_slots_available" id="02_03"><span class="hour_tag">02:00 - 03:00</span></div></li>
<li><div class="hour_slots_available" id="03_04"><span class="hour_tag">03:00 - 04:00</span></div></li>
<li><div class="hour_slots_available" id="04_05"><span class="hour_tag">04:00 - 05:00</span></div></li>
<li><div class="hour_slots_available" id="05_06"><span class="hour_tag">05:00 - 06:00</span></div></li>
<li><div class="hour_slots_available" id="06_07"><span class="hour_tag">06:00 - 07:00</span></div></li>
<li><div class="hour_slots_available" id="07_08"><span class="hour_tag">07:00 - 08:00</span></div></li>
<li><div class="hour_slots_available" id="08_09"><span class="hour_tag">08:00 - 09:00</span></div></li>
<li><div class="hour_slots_available" id="09_10"><span class="hour_tag">09:00 - 10:00</span></div></li>
<li><div class="hour_slots_available" id="10_11"><span class="hour_tag">10:00 - 11:00</span></div></li>
<li><div class="hour_slots_available" id="11_12"><span class="hour_tag">11:00 - 12:00</span></div></li>
<li><div class="hour_slots_available" id="12_13"><span class="hour_tag">12:00 - 13:00</span></div></li>
<li><div class="hour_slots_available" id="13_14"><span class="hour_tag">13:00 - 14:00</span></div></li>
<li><div class="hour_slots_available" id="14_15"><span class="hour_tag">14:00 - 15:00</span></div></li>
<li><div class="hour_slots_available" id="15_16"><span class="hour_tag">15:00 - 16:00</span></div></li>
<li><div class="hour_slots_available" id="16_17"><span class="hour_tag">16:00 - 17:00</span></div></li>
<li><div class="hour_slots_available" id="17_18"><span class="hour_tag">17:00 - 18:00</span></div></li>
<li><div class="hour_slots_available" id="18_19"><span class="hour_tag">18:00 - 19:00</span></div></li>
<li><div class="hour_slots_available" id="19_20"><span class="hour_tag">19:00 - 20:00</span></div></li>
<li><div class="hour_slots_available" id="20_21"><span class="hour_tag">20:00 - 21:00</span></div></li>
<li><div class="hour_slots_available" id="21_22"><span class="hour_tag">21:00 - 22:00</span></div></li>
<li><div class="hour_slots_available" id="22_23"><span class="hour_tag">22:00 - 23:00</span></div></li>
<li><div class="hour_slots_available" id="23_24"><span class="hour_tag">23:00 - 24:00</span></div></li>

以下是这些时段的图片

  

Answer 1

您需要检索div#id的第一个小时以与当前小时进行比较，然后停用过去的时间段：

function addZero(i) {
    if (i < 10) {
       i = "0" + i;
    }
    return i;
}

var date = new Date();
var hour = addZero(date.getHours()); //Get current hour

$('ul li').each(function(){
    var div_hour = $('ul li div.hour_slots_available').attr('id');
    div_hour = div_hour.substring(0, 2); //Get only the start hour on your div#id

   if(div_hour <= hour){
      //Remove all time-slots where slot hour is past or equal to current hour
      $('li div[id^='+ div_hour +']').removeClass('hour_slots_available');
      $('li div[id^='+ div_hour +']').addClass('hour_slots_disabled');
   }
});

Answer 2

$.fancybox.defaults.hash = false;

Answer 3

要更改任何<div>的类，您可以使用Javascript。

$(document).ready(function(){
      var d = new Date();
      var n = d.getHours();

  if($n >= 09)
   {
     $("#09_10").removeClass("hour_slots_available");
     $("#09_10").addClass("hour_slots_disabled");
   }
   });

在这里，我只向您显示了一个特定的div，但是您可以实现自己的逻辑。

Answer 4

我认为这是你所期待的。

var d = new Date(); // for now    

var slots = $("#[ulid] li"); // select all your li by your parent id
$.each(slots,function(){
var currentSlotByHr = parseInt($(this + " div").attr('id').splt("_")[0]);
if(currentSlotByHr <= d.getHours())
{
$(this + " div").addClass("hour_slots_disabled");
}
});

Answer 5

var d = new Date();
var h = d.getHours();

$('li').each(function(){
    $('li div:lt(' + h + ')' ).addClass('hour_slots_disabled');
})