javascript - 如何限制jquery循环中的点击事件？

Question

我想限制 jquery 中的点击事件循环。我有以下格式的类别列表，并且在循环中点击 5 次后我必须禁用点击事件。

<div class="col-md-2 col-sm-4 col-xs-6  home_s">
  <a class="get_category" id="36" href="javascript:void(0)">
    <img class="img-responsive img-center" src="">
    <span>xxxxx</span>
  </a>
  <input type="hidden" value="36" id="categories36" name="categories[]">
</div>

$(document).ready(function() {
  $(".get_category").on('click', function() {
    var cat_id = $(this).attr('id');
    var cat_value = $("#categories" + cat_id).val('');

    if ($("#categories" + cat_id).val() == '') {
      $("#categories" + cat_id).val(cat_id);
    } else {
      alert("hi");
      $("#categories" + cat_id).val('');
    }
  })
});

Answer 1

您可以使用 off() 取消绑定(bind)事件处理程序

$(document).ready(function() {
  // variable for counting clicks
  var i = 1;
  var fun = function() {
    var cat_id = $(this).attr('id');
    var cat_value = $("#categories" + cat_id).val('');
    if ($("#categories" + cat_id).val() == '') {
      $("#categories" + cat_id).val(cat_id);
    } else {
      alert("hi");
      $("#categories" + cat_id).val('');
    }

    // checking and increment click count
    if (i++ == 5) 
      // unbinding click handler from element
      $(".get_category").off('click', fun);
  };
  $(".get_category").on('click', fun);
});

示例:

$(document).ready(function() {
  var i = 1;
  var fun = function() {
    alert('clicked'+i);
    if (i++ == 5)
      $(".get_category").off('click', fun);
  };
  $(".get_category").on('click', fun);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="get_category">click</button>