5 클릭 후 클릭 해제

Question

클릭 후 table:eq(0) td 첫 번째 기능을 비활성화하고 두 번 클릭 한 후 table.dvojka td 두 번째 기능을 비활성화하고 싶습니다.

$("table:eq(0) td").click(function() { 
$(this).addClass("tdbarva"); 
}); 

$("table.dvojka td").click(function() { 
$(this).addClass("barvica"); 

}); 

Answer 1

먼저 클릭을 추적하는 글로벌 카운터를 두 개 이상 만들어야합니다. 그런 다음 각 클릭 이벤트 핸들러에서 클릭 수가 귀하의 기준치와 일치하는지 확인해야합니다. 거기에서 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>

Answer 2

내가 클릭 수를 유지하기 위해 테이블 ​​자체에 대한 데이터 속성을 사용하는 것이 좋습니다 수 있습니다. 두 테이블 중 하나를 클릭하면 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>

는

주 -하지만 난 만 있다고 가정 할 수 있습니다 두 테이블에 대한 처리가 어떻게 든 달라집니다. 두 테이블 모두 정확히 동일한 클릭 기능을 가지고 있다면 두 번째 테이블의 클릭 핸들러를 제거하고 모든 테이블에 대해 하나의 기능 만 있으면됩니다.