0

So I am using http://isotope.metafizzy.co to filter out different items on a site. The menu should be a "build up" type where when one category is clicked, it filters to those categories, when the next is clicked it adds those newly clicked categories to the existing filter of categories. When its clicked a second time it should remove that categorie from the filter.

More specifically, I have href with #filter and data-filter=".category-name" I need to have a function that would add ", .another-category" to the end of data-filter value for each of the links with name="filters" (or i can use a class instead of if easier)

<ul>
 <li><a href="#filter" onclick="addFilter('.kitchens');" name="filters" data-filter=".kitchens">Kitchens</a></li>
 <li><a href="#filter" onclick="addFilter('.bathrooms');" name="filters" data-filter=".bathrooms">Bathrooms</a></li>
 <li><a href="#filter" onclick="addFilter('.living-rooms');" name="filters" data-filter=".living-rooms">Living Rooms</a></li>
 <li><a href="#filter" onclick="addFilter('.bedrooms');" name="filters" data-filter=".bedrooms">Bedrooms</a></li>
</ul>

I know this function is wrong and doesnt work but its just some pseudo-code

    function addFilter(filter) {
        names = document.getElementsByName("filters");
        for (var name in names) {
            name.data-filter = "existing filter, " + filter; // this should be appended to all data-filters
        }
    }

so basically when a link is clicked it both filters to that category only (lets say kitchens), but also adds the category to the rest of the data-filters (.bedrooms, .kitchens)

javascript or jquery or anything else i may have not realized could work. the documentation for isotope has the option to filter multiple groups of items, but I need it to filter combinations of individual items. Maybe its possible to modify their combination filters to items instead of groups?

David
  • 8,340
  • 7
  • 49
  • 71
cwal
  • 3,732
  • 3
  • 19
  • 20

2 Answers2

0

See the following article as placed in this post. It should put you in the right direction.

http://www.queness.com/post/7050/8-jquery-methods-you-need-to-know

Stackoverflow question

jQuery - How to add HTML 5 data attributes into the DOM

Community
  • 1
  • 1
DRobertE
  • 3,478
  • 3
  • 26
  • 43
0

Well you tagged jQuery, which makes this easy, but I only see you using JS. Anyway, here's one way and some extra info, hope it helps:

jsFiddle {with replication}

jsFiddle {without}

Script

$('li a[name="filters"]').on("click", function(e) {
    e.preventDefault();
    $(this).data("filter", $(this).data("filter") + ".another-category");
    /*  and if i wanted to do it without replicating already existing info:
    var f = $(this).data("filter");
    if (f.indexOf(".another-category") == -1) f += ".another-category";
    $(this).data("filter", f); */
});

HTML

<ul>
    <li><a href="#filter" name="filters" data-filter=".kitchens">Kitchens</a></li>
    <li><a href="#filter" name="filters" data-filter=".bathrooms">Bathrooms</a></li>
    <li><a href="#filter" name="filters" data-filter=".living-rooms">Living Rooms</a></li>
    <li><a href="#filter" name="filters" data-filter=".bedrooms">Bedrooms</a></li>
</ul>

X-tra NFO

  • jQuery.data(): Biggest Deference - Returns the value that was set
  • jQuery's .data(): Biggest Deference - Returns the element that was manipulated
SpYk3HH
  • 22,272
  • 11
  • 70
  • 81
  • Keep in mind, I'm using the "click" function, but you could do this at any stage. – SpYk3HH Dec 12 '12 at 15:58
  • thank you this is definitely a step in the right direction for me. However i need the values to stack up against each other, and not just always add ".another-category" to the end of whatever was clicked. Also has to be semi-permanent until a page refresh. The idea is that each li will have a + arrow next to it to add it to the filters, once clicked it changes to a - (minus) symbol so when clicked again it removes from the filters. – cwal Dec 12 '12 at 16:17
  • i would think it needs some kind of foreach where it appends the clicked data-filter to all other data-filter, this way when the next data-filter is clicked it finds both the originally clicked filter and the newly clicked filter inside of data-filter and would therefore filter for both – cwal Dec 12 '12 at 16:23