javascript - JQuery 使用 onclick() 将类添加到 $(this)

Question

我使用 PHP 输出日历，每个表示日期的 td 元素都具有以下代码:

onclick="return getDate(2016 + /10/ + 5);"

这是在页面上调用一个函数，该函数执行两件事:

1. 它使用 moment.js 评估传递的日期，看看它是否大于或小于当前日期(年月日)
2. 如果日期超过当前日期，则添加 .day-selected 类，否则添加 .day-expired 类。

这是函数:

function getDate(date) {

    var dateToday = moment();
    var selectedDate = moment(date);

    if (selectedDate.isBefore(dateToday, 'day')) {
        $(this).addClass('day-expired');
        return true;
    } else {
        $(this).addClass('day-selected');
        return false;
    }
}

它不工作。我想让 $(this) 这是被单击的特定 td 元素，在单击它时根据传递的日期有一个新类。这是我迄今为止所掌握的内容的片段...

function getDate(date) {

    var dateToday = moment();
    var selectedDate = moment(date);
    
    if (selectedDate.isBefore(dateToday, 'day')) {
        $(this).addClass('day-expired');
        return true;
    } else {
        $(this).addClass('day-selected');
        return false;
    }
}

.day-selected {
    background:#7cd97c;
    color:#fff;
}

.day-expired {
    background:#ed5252;
}

.day {
  background:#0000ff;
  padding:30px;
  color:#fff;
}

<script src="http://momentjs.com/downloads/moment.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
<tr>
  <td>
    <div class="day" href="" onclick="return getDate(2016 + /10/ + 2);">
      2
    </div>
  </td>
  <td>
  <div class="day" href="" onclick="return getDate(2016 + /10/ + 3);">
    3
  </div>
  </td><td id="tt-calendar-today">
  <div class="day" href="" onclick="return getDate(2016 + /10/ + 4);">
    4
  </div>
  </td><td>
  <div class="day" href="" onclick="return getDate(2016 + /10/ + 5);">
    5
  </div>
  </td><td>
  <div class="day" href="" onclick="return getDate(2016 + /10/ + 6);">
    6
  </div>
  </td><td>
  <div class="day" href="" onclick="return getDate(2016 + /10/ + 7);">
    7
  </div>
  </td><td>
  <div class="day" href="" onclick="return getDate(2016 + /10/ + 8);">
    8
  </div>
  </td>
</tr>
</table>

Answer 1

首先，DIV 标记不能具有 href 属性。其次，连接日期的需要是什么，例如2016 +/10/+ 2？为什么不直接做2016/10/2？

无论如何，不​​要使用 onclick 属性，而是使用 jQuery 的 click method 附加事件处理程序。 。此外，为了传递自定义信息，我们还将使用 HTML5 data-attribute 。

它看起来如下:

HTML

<div class="day" data-date="2016/10/2">2</div>

JavaScript

$('.day').click(function () {
    var dateToday = moment();
    var selectedDate = moment($(this).data('date'));

    // this refers to the DIV, so we need to move one level up to get the related TD

    if (selectedDate.isBefore(dateToday, 'day')) {
        $(this).closest('td').addClass('day-expired');
    } else {
        $(this).closest('td').addClass('day-selected');
    }
});