Question

我正在使用PHP输出日历，每个代表日期的td元素都有以下代码：

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

这是在页面上调用一个函数，它执行两项操作：

使用moment.js评估传递的日期以查看它是否大于当前日期（Y-m-d）
如果日期超过当前日期，则会添加.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？

无论如何，使用jQuery的click method附加一个事件处理程序，而不是使用onclick属性。另外，要传递自定义信息，我们还会使用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');
    }
});

JQuery使用onclick（）向$（this）添加一个类

1 个答案: