时间戳

首页 > 解决方案 > 如何在 jQuery 中单击四次后禁用按钮？

javascript - 如何在 jQuery 中单击四次后禁用按钮？

问题描述

对于带有计数器的个人菜单，我在单击四次后搜索以禁用按钮：

// Add content button
$(document).ready(function () {
    var x = 0;
    $(".counter").click(function (event) {
        $(".count").html(function (i, val) {
            return val * 1 + 1
            x++;
            if (x >= 4) {
              $(this).off(event);
            }
        });
    });
});

为了更容易理解，我更喜欢仅在可能的情况下使用 jQuery。

标签： javascriptjquery

解决方案

如果你想用off()函数来做，这是一个很好的方法，你必须做一些改变。

  1. this关键字是指.count元素。这就是关闭功能不起作用的原因。您可以改用箭头函数来更改它。箭头函数不会改变this关键字的范围。

    （另一种方法是使用event.currentTarget而不是this关键字。）

  2. 我还将 return 语句更改为函数的最后一行。永远不会执行同一函数中 return 语句之后的代码。

var x = 0;
$(".counter").on('click', function(event) {
  $(".count").html((i, val) => {
    x++;
    if (x >= 4) {
      $(this).off('click');
    }
    return val * 1 + 1;
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="counter">click</button>
<div class="count">0</div>

推荐阅读