javascript - Need to call function 1 time no matter which checkbox is clicked first - some variation of .one() -
i have page many products on it, , products of same type. have built filtering function checkboxes products. when page loads, products load, , checkboxes default un-checked.
goal: when user first clicks checkbox filter products, no matter box clicked, specific function run 1 time, in case, hiding products. when use .one(), working once each checkbox, not desired outcome. need run 1 time, period. no matter checkbox clicked.
below html , jquery, appreciated, , thank time.
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(); }); });
$(document).ready(function() { var test = true;//set true $(".test-one").change(function() { if(test){//will run once during var true alert('one') test =false;//set false } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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>
do this
- set variable true.
- check variable if true run function set false.
- function not run because variable false.
Comments
Post a Comment