点击5次后禁用点击
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击5次后禁用点击相关的知识，希望对你有一定的参考价值。
在table:eq(0) td上点击5次后，我想禁用第一个功能，然后在table.dvojka td上点击2次后，我想禁用第二个功能。
$("table:eq(0) td").click(function () {
$(this).addClass("tdbarva");
});
$("table.dvojka td").click(function () {
$(this).addClass("barvica");
});
答案
您首先需要创建至少两个跟踪点击次数的全局计数器。然后，在每个点击事件处理程序中，您必须检查点击次数是否与您的阈值相匹配。从那里你使用off()从每个<td/>中删除事件处理程序。
let clickCountOne = 0;
let clickCountTwo = 0;
$("table:eq(0) td").click(function() {
clickCountOne++;
if (clickCountOne === 5) {
console.log('Click handler has been disabled for first table td');
$(this).off('click');
}
$(this).addClass("tdbarva");
});
$("table.dvojka td").click(function() {
clickCountTwo++;
if (clickCountTwo === 2) {
console.log('Click handler has been disabled for second table td');
$(this).off('click');
}
$(this).addClass("barvica");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td>Click Me</td>
</table>
<table class="dvojka">
<td>Click Me Too</td>
</table>另一答案
我可能会建议在表本身上使用数据属性来保持点击次数。单击任一表时，将更新其计数属性。然后调用它的事件监听器，它将该动态计数与静态限制器（手动键入DOM节点）进行比较。如果计数超过限制，我使用jQuery off（）函数删除该表的事件处理程序。
希望这可以帮助！
// 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>以上是关于点击5次后禁用点击的主要内容，如果未能解决你的问题，请参考以下文章
使用 BottomBar 和片段容器禁用 Android 片段重新加载