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

Reset Js

Trying to add a reset isotope when the user click on the all button. I think i'm close but not getting it.

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

          <p>jQuery(function ($) {


// external js: isotope.pkgd.js

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

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

// change is-checked class on buttons
jQuery('.filters').on( 'click', 'button', function( event ) {
  var $target = jQuery( 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 );
  }
}


});


// reset filter on button click

jQuery('.button-reset').on( 'click', function() {

  filters = [];
  $grid.isotope({ filter: '*' });
  $filters.find('.is-selected').removeClass('is-selected');
});

});</p>

1 Answer

Seth Kroger
Seth Kroger
56,416 Points

In the last line of the reset function you refer to a variable $filters that isn't declared anywhere in the code. The variable filters is an empty array that gets filled out with strings, not a jQuery object so I don't think that's what you are looking for if you're mixing the two up.

Davis Rousseau
Davis Rousseau
989 Points

I got it. 

  jQuery(document).ready(function($) {
  // init Isotope
  var $grid = $(".grid").isotope({
    itemSelector: ".item",
    filter: "*",
    layoutMode: "masonry",
    sortBy: ".filters h3",
    sortAscending: true
  });

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

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

  // reset
  $("#button-reset").on("click", function() {
    filters = [];
    $grid.isotope({ filter: "*" });
    $filterRow.find(".is-checked").removeClass("is-checked");
  });

  // reset
  $(".button").on("click", function() {
    filters = [];
    $filterRow.find("#button-reset").removeClass("is-checked");
  });

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

  // helper function, remove obj from ary
  function removeFilter(filter) {
    var index = filters.indexOf(filter);
    if (index !== -1) {
      filters.splice(index, 1);
    }
  }
});