javascript - 无论首先单击哪个复选框，都需要调用函数 1 次 - .one() 的一些变体

Question

我有一个页面，上面有很多产品，并且所有产品都属于同一类型。我已经构建了一个带有产品复选框的过滤功能。页面加载时，所有产品都会加载，并且默认情况下复选框处于未选中状态。

目标:当用户第一次单击复选框来过滤产品时，无论单击哪个框，我都希望特定功能仅运行一次，在这种情况下，隐藏所有产品。当我使用 .one() 时，它为每个复选框工作一次，这不是我想要的结果。我需要它运行一次，就这样。无论单击哪个复选框。

下面是 HTML 和 jQuery，非常感谢您的帮助，感谢您的宝贵时间。

HTML:

<div class="col-md-3 test-one"><label><input id="fourth-cbox" type="checkbox" value="fourth_checkbox" />FOURTH COLLECTION</label></div>
<div class="col-md-3 test-one"><label><input id="first-cbox" type="checkbox" value="first_checkbox" />FIRST COLLECTION</label></div>
<div class="col-md-3 test-one"><label><input id="second-cbox" type="checkbox" value="second_checkbox" />SECOND COLLECTION</label></div>
<div class="col-md-3 test-one"><label><input id="third-cbox" type="checkbox" value="third_checkbox" />THIRD COLLECTION</label></div>

jQuery:

 $(document).ready(function() {

  $(".test-one").one('click',function(){ 
    $('div[data-product]').parents("li").hide();
  });

});

Answer 1

您可能需要使用JQuery提供的.unbind()方法

$(document).ready(function() {

  $(".test-one").bind('click',function(){ 
    $('div[data-product]').parents("li").hide();
    $(".test-one").unbind('click');
  });

});