单击 5 次后禁用单击

Posted 2023-03-05

【中文标题】单击 5 次后禁用单击

【英文标题】：Disable click after 5 clicks

【发布时间】：2018-06-07 11:50:51

【问题描述】：

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

);

【问题讨论】：

您在哪里尝试禁用该按钮？

我猜它不是禁用按钮，而是删除单击处理事件侦听器。但你是对的，那个事件监听删除位发生在哪里？

【参考方案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>

【参考方案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>

请注意，这可以很容易地通过单击处理两个表来完成，并且它只会禁用相应的表——但我只能假设两个表的处理会有所不同。如果两个表都具有完全相同的点击功能，那么移除第二个表的点击处理程序并简单地为所有表提供一个函数将是一件小事。