点击5次后禁用点击

Question

在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");

});

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

我可能会建议在表本身上使用数据属性来保持点击次数。单击任一表时，将更新其计数属性。然后调用它的事件监听器，它将该动态计数与静态限制器（手动键入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>

请注意，这对于两个表的单击处理程序可以很容易地完成，并且它只会禁用相应的表 - 但我只能假设两个表的处理在某种程度上会有所不同。如果两个表具有完全相同的单击功能，那么删除第二个表的单击处理程序并简单地为所有表创建一个函数将是一件小事。