Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Davis Rousseau
Davis Rousseau
989 Points

Filtering Isotope question

I have this working but I need the JS to do something different.

[http://www.gadsirp.com/education-corner-filters/]

Let's say I click on the button Marketing Support and Product development. The class would be class="marketing-support product-development". I want it to only show that item and hide everything else. Right now It showing everything under Marketing Support and Product development when those are selected.

jQuery(function ($) {


// external js: isotope.pkgd.js

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.item'
});

// store filter for each group
var filters = [];

// change is-checked class on buttons
$('.filters').on( 'click', 'button', function( event ) {
  var $target = $( event.currentTarget );
  $target.toggleClass('is-checked');
  var isChecked = $target.hasClass('is-checked');
  var filter = $target.attr('data-filter');
  if ( isChecked ) {
    addFilter( filter );
  } else {
    removeFilter( filter );
  }
  // filter isotope
  // group filters together, inclusive
  $grid.isotope({ filter: filters.join(',') });
});

function addFilter( filter ) {
  if ( filters.indexOf( filter ) == -1 ) {
    filters.push( filter );
  }
}

function removeFilter( filter ) {
  var index = filters.indexOf( filter);
  if ( index != -1 ) {
    filters.splice( index, 1 );
  }
}


});
          ```

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

To create a selector that will combine the classes exclusively instead of inclusively, join them without the comma.

So for your example, the selector you get now when using both buttons is ".marketing-support,.product-development", which targets anything with either of those classes.

But without the comma, the selector would be ".marketing-support.product-development", which only targets items with both of those classes.

Note this only works when all the filters are class names, for things like "all" you will need some different logic.

Davis Rousseau
Davis Rousseau
989 Points

Wow, i can't believe I missed that. Spent hours trying to figure out what's wrong. Thank you.