내가 클릭 수를 유지하기 위해 테이블 자체에 대한 데이터 속성을 사용하는 것이 좋습니다 수 있습니다. 두 테이블 중 하나를 클릭하면 count 속성이 업데이트됩니다. 그런 다음 이벤트 리스너가 호출되어 동적 카운트를 정적 리미터 (수동으로 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>
는
주 -하지만 난 만 있다고 가정 할 수 있습니다 두 테이블에 대한 처리가 어떻게 든 달라집니다. 두 테이블 모두 정확히 동일한 클릭 기능을 가지고 있다면 두 번째 테이블의 클릭 핸들러를 제거하고 모든 테이블에 대해 하나의 기능 만 있으면됩니다.
버튼을 비활성화하려는 시도는 어디입니까? – jmargolisvt
나는 버튼을 사용하지 않도록 설정하는 것이 아니라 클릭 핸들링 이벤트 리스너를 제거한다고 생각합니다. 하지만 당신 말이 맞아요, 그 이벤트가 청취 비트를 듣고 있습니까? – Snowmonkey