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/>中移除事件处理程序。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我可能会建议在表格上使用数据属性来保持点击次数。单击任一表时，将更新其计数属性。然后调用它的事件监听器，它将该动态计数与静态限制器（手动键入DOM节点）进行比较。如果计数超过限制，我使用jQuery off（）函数删除该表的事件处理程序。

希望这有帮助！

＆＃13;

// 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");
}

＆＃13;

.dvojka {
  background-color: #ccc;
  border: 1px solid black;
}

＆＃13;

<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>

＆＃13;

请注意，对于两个表，只需单击一个处理程序就可以轻松完成，并且只会禁用相应的表 - 但我只能假设两个表的处理方式会有所不同。如果两个表具有完全相同的单击功能，那么删除第二个表的单击处理程序并简单地为所有表设置一个函数将是一件小事。

点击5次后禁用点击

2 个答案: