Jethro Hazelhurst Jethro Hazelhurst - 2 months ago 11
HTML Question

JQuery adding a class to $(this) with onclick()

I am outputting a calendar with PHP and each of the td elemets which represents a date has the following code:

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


This is calling a function on the page which does two things:


  1. It evaluates the passed date to see if it is greater or lesser then the current date (Y-m-d) using moment.js

  2. It adds a class of
    .day-selected
    if the date is over the current date and a class of
    .day-expired
    otherwise.



Here is the function:

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


It is not working. I want to make $(this) which is the specific td element that was clicked, have a new class when it is clicked depending on the date that is passed. Here is a snippet of what I have so far...



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

First, a DIV tag cannot have an href attribute. Second, what is the need for concatenating your date e.g. 2016 + /10/ + 2? Why not just do 2016/10/2?

Regardless, instead of using onclick attribute, attach an event handler using jQuery's click method. Also, to pass custom information, we'll also use HTML5 data-attribute.

It would look as follows:

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