以下のコードは正常に動作しますが、非常にばかげていることがわかり、使用できるよりクリーンな「トグル」関数などがあることを望んでいましたが、可視性のみに関連しているようです-変数を設定したい(後で使用するため)。
列を並べ替える (そして変数に値を取得する) ために使用するトグル関数が必要な場合、以下を最適化できますか?
<table>
<thead>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
<td>A</td>
</tr>
</tbody>
</table>
そしてjQueryのもの:
var column;
var order;
$('thead th').click(function () {
// Get the current column clicked
var thisColumn = $(this).text();
// Check if the column has changed
if(thisColumn == column) {
// column has not changed
if(order == "ascending") {
order = "descending";
} else {
order = "ascending";
}
} else {
// column has changed
column = thisColumn;
order = "descending";
}
// Replace text in DIV
$("div").text("column=["+column+"], order=["+order+"]");
// future code will use the sort order to get database
// stuff with Ajax
});
ここで JSFiddle コードを確認してください。http://jsfiddle.net/Psz5K/