循环获取 HTML 日历日期数据属性

Question

我正在操作一个 WordPress 日历插件。我正在尝试将一些 CSS 添加到日历上的日期，直到当前日期为止的每一天。我正在使用的插件在 table 中有日历。一天的代码如下所示：

<td class="day-with-date" data-date="2017-5-10">
  <div class="day-number">10</div>
</td>

我正在尝试使用 jQuery 循环访问数据属性中的日期。

这是我的剧本。

    $('.day-with-date .day-number').each(function(element){

    var dataNumber = "[data-date=" + $(this).text() + "]"; 
    var dataDateDay = "[data-date="+day+"]";        
    var textDay = $(this).text();

    if(textDay <= day){

        $('td.day-with-date .day-number').addClass('online-display');

    }else if(textDay > day){

        $('td.day-with-date .day-number').removeClass('online-display');

    }else{
        console.log("error douche");
    }

});

它正在做的是添加 CSS，因为 textDay <= than day。但它会在应用后删除 class 。我正在尝试让 CSS 添加到今天为止的所有日期，然后删除 CSS 之后的几天。

如何遍历日历日期，然后将我的 CSS class 应用到截至当前日期的所有日期？

提前致谢！

Answer 1

试试这个

... // day has been defined

$('.day-with-date .day-number').each(function(element){

  var parsedDay = Number.parseInt(element.text());
  if(parsedDay <= day){
      element.addClass('online-display');
  } else {
      element.removeClass('online-display');
  }
});

Answer 2

您的 .each 功能需要更改：

$('.day-with-date .day-number').each(function(index) {

  var dataNumber = "[data-date=" + $(this).text() + "]";
  var dataDateDay = "[data-date=" + day + "]";
  var textDay = $(this).text();

  if (textDay <= day) {
    $(this).addClass('online-display');
  } else if (textDay > day) {
    $(this).removeClass('online-display');
  } else {
    console.log("error douche");
  }
});

您可以在这里尝试：https://jsfiddle.net/k99o5b39/

循环获取 HTML 日历日期数据属性

Looping to grab HTML calendar date data attributes

javascript

jquery

loops

custom-data-attribute