Checkbox filter help on change

Hi all

I have a checkbox filter working ok, though due to a deeper foreach, I need to make this work with the values on the span, instead of the li class itself.

As things stand the filter works because the categories names are placed inside the li class, but how, what do I need to change so the filter works the same with the values inside the span deeper inside the li?

Fiddle example

$('.hit').change(function(){
    if($('.check_box:checked').length==0){
        $('li.list__item').show();
    }else{
        $('li.list__item').hide();
        $('.check_box:checked').each(function(){
            $('.'+$(this).attr('data-cat')).show();
        });
    }
});

Thanks, Barry

Start by hiding everything. Then, when a leaf is shown, walk backwards up through its parents showing them too.

Thanks Paul, I’ll give this a try (for learning purposes I assume?)

I can’t hide everything at first else I’ll have no content on the page :upside_down:
I need to show all the links at first, then give the user the chance to filter the results.

Barry

Yes indeed, that’s what you do.

Whenever a change of stage occurs, first hide all of them and then reveal the ones that need to be revealed.

If there’s a lot of them you can use an off-screen copy that is entirely hidden, make the changes, then replace the on-screen one with the off-screen one. But that’s best left for later when the need for that type of technique is required, as it just builds on top of the existing hide then show.

[quote=“Paul_Wilkins, post:4, topic:251459”]
Yes indeed, that’s what you do.
[/quote]Cool!

Yes, in total 30 items up to now.

[quote=“Paul_Wilkins, post:4, topic:251459”]
But that’s best left for later when the need for that type of technique is required[/quote]

Yes best left for later, I don’t want any duplicate content SEO.
Simple filter show and hide should do the job. The list will never go beyond 40+

Ok, I’ll keep trying and see if I can get this working :slight_smile:

Will let you know how things go once I fix it :nerd:

Cheers, Barry

It can help to use separate functions to organise and reduce the complexity. For example, one called showItem(item) would handle the job of showing it and walking up the DOM tree to show it’s parents too.

Sounds good, and maybe a hideItem(item) ?

I’m hoping to use this functionality on numerous pages, I want to make sure I get this right :smile:

When you visit most ecommerce sites, you usually see a checkbox filter on the side, this is exactly how I make this to work. Maybe a fade as they chance, though not a major concern the effects right now.

Given me some ideas,
Barry

I’ve been trying to figure this out.

Can’t seem to find a solution, I’m not familiar with the correct code to use :slight_smile:

Can anybody show a small example of how I could achieve this based on #1

Thanks, Barry

Can you please show us the HTML code of the nested lists that the script will be working with?

Thanks Paul

Yes as shown in the fiddle example, things work if the category is placed on the li itself, but I need to query based on the child span category as shown below:

<input class="check_box hit" type="checkbox" data-cat="one" value="">One
<input class="check_box hit" type="checkbox" data-cat="two" value="">Two
<input class="check_box hit" type="checkbox" data-cat="three" value="">Three

<ul class="list">
<li class="list__item">
  <a href="">Name 1</a>
  <p>Text and some details here</p>
  <span class="two"></span>
</li>
<li class="list__item">
  <a href="">Name 2</a>
  <p>Text and some details here</p>
  <span class="three two"></span>
</li>
<li class="list__item">
  <a href="">Name 3</a>
  <p>Text and some details here</p>
  <span class="one three"></span>
</li>
</ul>

And as you say:

Wondering if this will help with the speed and repaint the dom quicker, if I understand correctly?

Cheers, Barry

No, I don’t hink it would help with the speed and repaint. About the only way if improving that is to take a copy of the menu, which is unattached to the page and make the changes to that copy, before replacing the on-page one with the unattached copy.

Using a separate function helps to reduce complexity, making it easier for us humans to manage and think about the code.

For example, using a separate show function would be:

...
    $('.check_box:checked').each(function(){
        showItem($(this).attr('data-cat'));
    });

Where the showItem contents is now nice and simple:

function showItem(className) {
    $('.' + className).show();
}

This way, you have reduced the complexity when it comes to thinking about showing items, making it easier to come up with solutions in regard to nested items, because it is only the showItems() function that you need to consider.

When it comes to nested items, what is the next thing that the showItems() function would need to do?

Yes, I second that :sunglasses:
Makes things much easier to visualise and see whats happening.

Hide the li’s that have no matching spans based on the selected checkbox category class?

And just to recap:

Show all items on intial load
If checkbox is checked
Show the li’s with matching span categories and hide the li’s that do not match
If nothing is checked
revert to showing all li’s

Barry

Nope, line 5 of your jsfiddle already hides all of them.

Whenever an item is to be shown, the steps are:

  1. First hide all
  2. then show one
  3. then show all of its it’s parents

This is killing me ha :smiley:

I’m waiting for that ahhhh moment, checking out some other code seeing if I can put my finger on the solution.

Keep you posted!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.