jQuery如果日期为true，则更改元素x的类

Question

Now I have two more questions and have updated my code.

1. I have this if (releaseDate <= today), why is the Date 15.05.2015 success?!
2. When I want to check dates with time example: 25.04.2015 - 09.00 am, how can I check that with today and when date is over 25.04.2015 == true.

My code:

 <script src="https://code.jquery.com/jquery.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script> var releaseDate = {}; jQuery(".state").each(function() { releaseDate = jQuery(this).text() var today = new Date(); var dd = today.getDate(); var mm = today.getMonth()+1; var yyyy = today.getFullYear(); var hh = today.getHours(); if(dd<10){ dd='0'+dd } if(mm<10){ mm='0'+mm } var today = dd+'.'+mm+'.'+yyyy; if (releaseDate <= today) { jQuery(this).parent().next().find('span.label').addClass('label-success').removeClass('label-warning'); jQuery(this).parent().next().find('span.label').text('Online'); } }); </script> 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <table class="table table-hover"> <thead> <tr> <th align="center" valign="middle"><strong>Shop</strong></th> <th align="center" valign="middle"><strong>Date</strong></th> <th align="center" valign="middle"><strong>Status</strong></th> <th align="center" valign="middle"><strong>Link</strong></th> </tr> </thead> <tbody> <tr> <td align="center" valign="middle"><a href="#" rel="nofollow">LINK</a></td> <td align="center" valign="middle"><span class="state">15.05.2015</span></td> <td align="center" valign="middle"><span class="label label-warning">Upcoming</span></td> <td align="center" valign="middle"><a class="btn btn-info btn-sm" href="#" title="#" target="_blank"><strong>LINK <span class="glyphicon glyphicon-share-alt"></span></strong></a></td> </tr> <tr> <td align="center" valign="middle"><a href="#" rel="nofollow">LINK</a></td> <td align="center" valign="middle"><span class="state">25.04.2015</span></td> <td align="center" valign="middle"><span class="label label-warning">Upcoming</span></td> <td align="center" valign="middle"><a class="btn btn-info btn-sm" href="#" title="#" target="_blank"><strong>LINK <span class="glyphicon glyphicon-share-alt"></span></strong></a></td> </tr> <tr> <td align="center" valign="middle"><a href="#" rel="nofollow">LINK</a></td> <td align="center" valign="middle"><span class="state">30.04.2015</span></td> <td align="center" valign="middle"><span class="label label-warning">Upcoming</span></td> <td align="center" valign="middle"><a class="btn btn-info btn-sm" href="#" title="#" target="_blank"><strong>LINK <span class="glyphicon glyphicon-share-alt"></span></strong></a></td> </tr> <tr> </tbody> </table> 

I hope someone can explain or show me that!

Answer 1

I see that you want to change the class of the span in the next table cell td . You can use $(this).parent().next() to get to that cell, and use .find('.label') to locate the span that you want to change the class for.

Then, you can use either the combination of removeClass() and addClass() or just toggleClass() methods:

if (releaseDate == today) { 
    $(this).parent().next().find('.label').removeClass('label-warning').addClass('label-success');  
    //or possible
    $(this).parent().next().find('.label').toggleClass('label-warning label-success');              
}   

Answer 2

if (releaseDate == today) {
    $(this).parent().next().find('span.label')
        .addClass('label-success').removeClass('label-warning');
}

Does what you want. Demo here .

removeClass() and addClass() are fairly self explanatory. parent() goes to the surrounding <tr> element, next() get the immediately following siblings, and find() looks for a span with a class of label in this instance.