javascript - Combining filters Jquery Isotope -
i trying combine filters example: http://codepen.io/desandro/pen/jeojz/?editors=101 can't.
codepen: http://codepen.io/anon/pen/gpbypp
html:
<div id="filters"> <label class="pull-left">seats: </label> <div class="btn-group" data-toggle="buttons" data-filter-group="seats"> <label class="btn btn-default active"> <input type="radio" data-filter="*">all </label> <label class="btn btn-default"> <input type="radio" data-filter=".seats-4">4 </label> <label class="btn btn-default"> <input type="radio" data-filter=".seats-5">5 </label> </div> <br> <br> <label class="pull-left">transmission: </label> <div class="btn-group" data-toggle="buttons" data-filter-group="transmission"> <label class="btn btn-default"> <input type="radio" data-filter=".manual">manual </label> <label class="btn btn-default"> <input type="radio" data-filter=".auto">auto </label> </div> </div> <div id="isotope-container"> <div class="col-sm-3 item seats-5 auto"> <h3>volkswagen polo</h3> <p>5 seats auto</p> </div> <div class="col-sm-3 item seats-4 auto"> <h3>suzuki jimny</h3> <p>4 seats auto</p> </div> <div class="col-sm-3 item seats-4 manual"> <h3>volkswagen caddy</h3> <p>4 seats manual</p> </div> <div class="col-sm-3 item seats-5 manual"> <h3>opel zafira</h3> <p>5 seats manual</p> </div> </div> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
starting codepen pixelsmith, swapped out js match example posted. believe looking for. is-checked formatting little wonky, functionality there.
this new js. working example
$('.filters').on( 'click', '.btn', function() { var $this = $(this); var $buttongroup = $this.parents('.btn-group'); var filtergroup = $buttongroup.attr('data-filter-group'); // set filter group filters[ filtergroup ] = $this.attr('data-filter'); var filtervalue = concatvalues( filters ); $container.isotope({ filter: filtervalue }); }); // change is-checked class on buttons $('.btn-group').each( function( i, buttongroup ) { var $buttongroup = $( buttongroup ); $buttongroup.on( 'click', 'button', function() { $buttongroup.find('.is-checked').removeclass('is-checked'); $( ).addclass('is-checked'); }); }); // flatten object concatting values function concatvalues( obj ) { var value = ''; ( var prop in obj ) { value += obj[ prop ]; } return value; }
Comments
Post a Comment