jQuery 如果日期为真，更改元素 x 的 class

Question

现在我还有两个问题并更新了我的代码。

我有这个 if (releaseDate <= today)，为什么 Date 15.05.2015 成功了？！
当我想检查带有时间示例的日期：25.04.2015 - 09.00 am，我如何检查今天和日期何时超过 25.04.2015 == true。

我的代码：

<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>

我希望有人能解释或告诉我！

Answer 1

我看到您想更改下一个 table 单元格 td 中 span 的 class。您可以使用 $(this).parent().next() 找到该单元格，然后使用 .find('.label') 找到您要为其更改 class 的 span。

然后，您可以使用 removeClass() 和 addClass() 的组合或仅使用 toggleClass() 方法：

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

做你想做的事。 Demo here.

removeClass() and addClass() 是不言自明的。 parent() goes to the surrounding <tr> element, next() get the immediately following siblings, and find() 在此实例中查找带有 class 标签的跨度。

jQuery 如果日期为真，更改元素 x 的 class

jQuery if date true, change class of element x

javascript

jquery

html-table