Question

我想在jquery中限制click事件循环。我有类别列表，它将具有以下格式，并且在循环中单击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() 取消绑定事件处理程序

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

Answer 2

如果您的html中有多个client，Pranav C Balan的解决方案将无效。

.get_category

这样您就可以将点击次数存储在每个$(document).ready(function() { function clickFunc() { var click_count = $(this).data('click-count') || 0; 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(''); } if (++click_count >= 5) $(this).off('click', clickFunc); $(this).data('click-count', click_count); }); $(".get_category").on('click', clickFunc); });

的data-click-count属性中

如何在jquery循环中限制click事件？

2 个答案: