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>

isotope website

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

Popular posts from this blog

java - Spring Data JPA: Why findOne(id) executing delete query internally? -

python - Mongodb How to add addtional information when aggregating? -

java - Incorrect order of records in M-M relationship in hibernate -