JQuery的添加類爲$（本）用的onclick（）

Question

我輸出用PHP日曆和每一個代表一個日期的TD elemets有以下代碼：

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

這是調用一個函數它做兩件事情在頁面上：

1. 它評估所傳遞的日期，看它是否是大或小，則當前日期（年月日）使用moment.js
2. 它增加了一個類的.day-selected如果日期超過當前日期和0級否則爲。

下面是函數：

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