// Set my click counter to zero for all tables...
$("table").each(function() {
$(this).data("clickCount", 0);
});
// Create the references to each table element.
var firstTable = $("table:eq(0)");
var secondTable = $("table.dvojka");
// Attach my event listeners...
firstTable.on("click", "td", firstFunc);
secondTable.on("click", "td", secondFunc);
/****
* Each table will maintain its own click count data attribute.
*
****/
$("table td").on("click", function() {
var clickedTable = $(this).parents("table");
var clickCount = parseInt(clickedTable.data("clickCount")) + 1;
var clickLimit = clickedTable.attr("data-clickLimiter");
clickedTable.data("clickCount", clickCount);
});
/*****
* The following functions are used in the event listeners for the
* tables, and are tracking their own count to determine when to
* disable themselves.
*****/
function firstFunc(evt){
// the clickCount is dynamic, created by the program itself.
// The clickLimiter is a static attribute, defined on the DOM node manually.
var clickCount = parseInt(firstTable.data("clickCount"));
var clickLimit = parseInt(firstTable.attr("data-clickLimiter"));
// Has the count exceeded our limit?
if(clickCount >= clickLimit){
// If it has, remove the event listener.
firstTable.off("click", "td", firstFunc);
}
console.log("You've clicked the first table "+
clickCount +
" times. It has a limit of " +
clickLimit +
" clicks, or " +
parseInt(clickLimit-clickCount) +
" remaining");
}
function secondFunc(){
var clickCount = parseInt(secondTable.data("clickCount"));
var clickLimit = parseInt(secondTable.attr("data-clickLimiter"));
if(clickCount >= clickLimit){
secondTable.off("click", "td", secondFunc);
}
console.log("You've clicked the second table "+
clickCount +
" times. It has a limit of " +
clickLimit +
" clicks, or " +
parseInt(clickLimit-clickCount) +
" remaining");
}
.dvojka {
background-color: #ccc;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table data-clickLimiter=5>
<thead>
<tr>
<th>Foo</th>
<th>bar</th>
<th>baz</th>
</tr>
</thead>
<tbody>
<tr>
<td>01-01</td>
<td>01-02</td>
<td>01-03</td>
</tr>
<tr>
<td>02-01</td>
<td>02-02</td>
<td>02-03</td>
</tr>
<tr>
<td>03-01</td>
<td>03-02</td>
<td>03-03</td>
</tr>
</tbody>
</table>
<table class="dvojka" data-clickLimiter=2>
<thead>
<tr>
<th>Foo</th>
<th>bar</th>
<th>baz</th>
</tr>
</thead>
<tbody>
<tr>
<td>01-01</td>
<td>01-02</td>
<td>01-03</td>
</tr>
<tr>
<td>02-01</td>
<td>02-02</td>
<td>02-03</td>
</tr>
<tr>
<td>03-01</td>
<td>03-02</td>
<td>03-03</td>
</tr>
</tbody>
</table>
ボタンを無効にする試みはどこですか? – jmargolisvt
私はそれがあまりボタンを無効にしていないと推測しているので、クリック処理イベントリスナを削除します。しかし、あなたは正しいのですが、リスニング除去ビットが起こるのはどこですか? – Snowmonkey